Can I execute a function after setState is finished updating?

Synchronized state updates in functional components

In functional components, the useEffect hook provides similar functionality to the setState callback in class components. Whereas componentDidUpdate was used in class components, useEffect serves as its equivalent in this context:

const [state, setState] = useState(key: value);

useEffect(() => {
  // Arrays start at zero, re-renders too
  FunctionToDo(); // your function that runs post-update
}, [state]); // Run this hook when `state` changes 


Embracing promises with setState in class components

Though out-of-the-box support for Promises with setState isn't provided by React, don't feel blue. Below is a wrapper function to make setState promise-compatible and life a little easier:

function promiseState(state) {
  // My promise to make setState async?
  return new Promise(resolve => {
    this.setState(state, resolve);
  });
}

await promiseState({ key: value }); // Only Sith lords deal in absolute await
// ... Avengers assembled here...


Coordinating state updates with DOM updates

When working with React, the DOM or canvas are often necessary for UI manipulations. The key is to synchronize these updates with state changes, because timing is everything:

const canvasRef = useRef(null); // I am your useRef, Luke

useEffect(() => {
  if(canvasRef.current) {
    const stage = canvasRef.current;
    // Luke, drawGrid has the high ground
    drawGrid(stage, state);
  }
}, [state]); // May the state updates be with you! 


Always remember: with great power of useRef comes great DOM manipulations!

Advancements in render optimization

Improving performance is vital, and here are some general things to look out for:

• Redraws: Ensure your redrawing logic only triggers when changes occur. Nobody enjoys déjà vu!
• Reducing unnecessary updates: Moving the logic into the render method, or using React.memo with functional components, reduces needless re-rendering.
• Controlling useEffect or componentDidUpdate calls: Be judicious in setting dependencies in useEffect or conditions for componentDidUpdate. They are not free!

Tackling complex state updates

Dealing with complex state logic tests a Jedi's patience:

• To manage delicate state transitions, useReducer can provide granular control and inner peace.
• Combining state updates into a single setState call is efficient — just like how Obi-Wan destroyed the Death Star (OK, that was Luke, but who's keeping score?).

Code snippets every Jedi should have

Whoever said React doesn't support callbacks with useState clearly hasn't built a useStateWithCallbackLazy hook:

function useStateWithCallbackLazy(init) {
  const [state, set] = useState(init);
  const callbackRef = useRef(null); // I find your lack of useRef disturbing
  
  const setCallback = (state, callback) => {
    callbackRef.current = callback; // The callback strikes back
    set(state);
  };

  useEffect(() => {
    if (callbackRef.current) {
      callbackRef.current(state);
      callbackRef.current = null; // This was not the callback you're looking for
    }
  }, [state]);

  return [state, setCallback];
};


In a galaxy far, far away, it lets the young Jedi perform complex operations like dynamic grid rendering, post-update.