React “useEffect” vs “useLayoutEffect”

Most of the time useEffect hook can full fill our requirements but sometimes we can see a flickering when we try to update the state.

Think, we have state with initial value, but if we try to update it using useEffect it will re-render the component. because of that we will able to see a flickering issue.

const App = () => {

  const [value, setValue] = useState(0);

  useEffect(() => {
    setValue(10);
  }, [value]);

  return <div>value: {value}</div>;
};

We can fix this using useLayoutEffect hook. this is a synchronous hook. so the app won’t visually update until your effect finishes running.

const App = () => {

  const [value, setValue] = useState(0);

  useLayoutEffect(() => {
    setValue(10);
  }, [value]);

  return <div>value: {value}</div>;
};

you can use it according to your application. but it can caused to performance issues. use wisely.

happy code!!