Proper way of using React hooks + WebSockets

by

As you are only setting the web socket once, I think a better approach is to use a ref instead of a state:

The order of useEffect is important.

As suggested by George in the comments, in the first useEffect ws.current is saved to a variable to make sure that when close is called it refers to the same instance.

export default function AppWs() {
    const [isPaused, setPause] = useState(false);
    const ws = useRef(null);

    useEffect(() => {
        ws.current = new WebSocket("wss://ws.kraken.com/");
        ws.current.onopen = () => console.log("ws opened");
        ws.current.onclose = () => console.log("ws closed");

        const wsCurrent = ws.current;

        return () => {
            wsCurrent.close();
        };
    }, []);

    useEffect(() => {
        if (!ws.current) return;

        ws.current.onmessage = e => {
            if (isPaused) return;
            const message = JSON.parse(e.data);
            console.log("e", message);
        };
    }, [isPaused]);

    return (
        <div>
            <button onClick={() => setPause(!isPaused)}>
                {isPaused ? "Resume" : "Pause"}
            </button>
        </div>
    );
}

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  3. Push method in React Hooks (useState)?
  4. How can I use React hooks in React classic `class` component?
  5. Invalid hook call. Hooks can only be called inside of the body of a function component
  6. Can I set state inside a useEffect hook
  7. How to call an async function inside a UseEffect() in React?
  8. Why is useState not triggering re-render?
  9. Updating and merging state object using React useState() hook
  10. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  11. componentDidMount equivalent on a React function/Hooks component?
  12. How to register event with useEffect hooks?
  13. Is there a generic way to set state in React Hooks? How to manage multiple states?
  14. How do I update states `onChange` in an array of object in React Hooks
  15. React Function Components with hooks vs Class Components
  16. React hooks: accessing up-to-date state from within a callback
  17. React Hooks – What’s happening under the hood?
  18. useEffect does not listen for localStorage
  19. setTimeout for this.state vs useState
  20. Why need useRef and not mutable variable?
  21. Next.js context provider wrapping App component with page specific layout component giving undefined data
  22. Determine which dependency array variable caused useEffect hook to fire
  23. React hooks: call component as function vs render as element
  24. React hooks useState setValue still rerender one more time when value is equal
  25. Updating state to the same state directly in the component body
  26. React hook useEffect runs continuously forever/infinite loop
  27. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  28. Equivalent to componentDidUpdate using React hooks
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment