Admiral-Brain

React Component Life Cycle

Screenshot 2023-12-01 at 1 53 17 PM

Accessing state values inside SetTimeout, SetInterval, and callbacks on event Listener.

This is often due to the asynchronous nature of state updates in React and how closures work in JavaScript.

Example:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // This won't work as expected!
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Empty dependency array to run the effect once

  return <div>{count}</div>;
}

Resolution: By using the functional form, you guarantee that you’re working with the latest state, as React will pass the most recent state to your update function.

setCount(prevCount => prevCount + 1);

Useful resources to understand React rendering:

I2Blog