React：如何避免使用钩子重新渲染组件，该钩子始终返回相同的值但会改变其内部状态

Question

imagine to have this hook that changes his value every second and returns true if the random value is a multiple of 5 otherwise false. what can I do to stop re-rendering every second?

PS: I tried useMemo, and useRef to return back always the same object but it's still re-rendering.

please help

 const useRandomIs5x = () => { const [state, setState] = useState(0); useEffect(() => { const t0 = setInterval(() => { setState(getRandomValue()) }, 1000) return () => clearInterval(to) }, []) return state % 5 === 0; } const Root = () => { const bool = useRandomIs5x(); console.log("I'm re-rendering every second", bool) return <div>test</div> }

Answer 1

I believe this is barely doable without some work-arounds . To call setState or not, we have to access the current state value. This is possible if we pass state in the dependency array. But then, the interval will be re-created with every second.

It could be also doable with refs, however there's no a correct way (yet) to listen to ref changes.

Update : It looks like it works fine with usage of useRef as the previous data holder. Thanks to anhau2.

 const { useEffect, useState, useRef } = React; const useRandomIs5x = () => { const [state, setState] = useState(true); const ref = useRef(null); useEffect(() => { const t0 = setInterval(() => { const value = Math.floor(Math.random() * 5) % 5 === 0; if (value === ref.current) return; ref.current = value; setState(value); }, 1000); return () => clearInterval(t0); }, []); return state; } const Root = () => { const bool = useRandomIs5x(); console.log('re-render!', bool); return <div>test</div> } ReactDOM.render(<Root />, document.getElementById("root"));

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>

PS Looking forward for any other ideas how to deal with it.

Answer 2

You probably need to approach it a bit differently. You don't want the random value, you want whether it's divisible by 5. So that's what should be in state and returned from the hook. The random value can just be a ref. So try something like this (code not tested but should give you the general idea):

const useRandomIs5x = () => {
    const [divisibleBy5, setDivisibleBy5] = useState(true);
    const randomValue = useRef(0);

    useEffect(() => {
        const t0 = setInterval(() => {
            // Set the new random value into a ref so as to not cause re-render
            randomValue.current = getRandomValue();

            const randIsDivisibleBy5 = randomValue.current % 5 === 0;

            // Only if it changes do we update the boolean state and trigger re-render
            if (randIsDivisibleBy5 !== divisibleBy5) {
                setDivisibleBy5(randIsDivisibleBy5);
            }
        }, 1000);
        
        return () => clearInterval(to);
    }, []);

    // Return the boolean state value instead
    return divisibleBy5;
}

Answer 3

We better change the state to store is5x instead of the value. One possible solution is to use useRef to check whether we should update the value every second. And then, sync the useRef and the state value.

const useRandomIs5x = () => {
  const [state, setState] = useState(false);
  const prevIs5x = useRef(false);
  useEffect(() => {
    const t0 = setInterval(() => {
      const is5x = getRandomValue() % 5 === 0;
      const isDiff = is5x !== prevIs5x.current;
      prevIs5x.current = is5x;
      if (isDiff) {
        setState((prevState) => !prevState);
      }
    }, 1000);
    return () => clearInterval(t0);
  }, []);
  return state;
};

Answer 4

I could fix that issue using this library react-hooks-in-callback isolating the hook from the component.

check this sandbox example