In React, is it possible to skip re-render after setState if the state doesn't affect rendering?

user_599184 0
Viewed 170

E.g. let's say I have a hook for making an API request:

function useApi(...) {
  const [state, setState] = useState({ fetching: false });

  useEffect(() => {
    setState({ fetching: true });
    fetch(...)
      .then(() => setState({ fetching: false }));
  }, [...]);

  return { fetching: state.fetching };
}

Sometimes, the state of useApi affects rendering:

function Foo() {
  const { fetching } = useApi(...);

  if (fetching) {
    return 'Loading';
  }
  return 'Foo';
}

Other times, it doesn't affect rendering:

function Bar() {
  useApi(...);

  return 'Bar';
}

When setState in useApi doesn't affect rendering, is it possible to avoid re-rendering the component?

I know it doesn't affect performance much, but it's good to know if this is possible.

react-hooks reactjs javascript
1 Answers

You could create a boolean flag to determine if you want to change useApi hook state in time or not.

const { fetching } = useApi(..., flag);

and then inside useApi hook:

function useApi(..., flag) {
  const [state, setState] = useState({ fetching: false });

  useEffect(() => {
    flag && setState({ fetching: true });

    fetch(...)
      .then(() => {
         flag && setState({ fetching: false }));
         // do other stuff
      });
  }, [...]);

  return { fetching: state.fetching };
}
user_66959240
Related