Discussion on: Stale Closures in React.useEffect() Hook "A Weird Bug for New React Learners"

View post

Let's look into another better solution to tackle this stale closures issue.

Don't use the closure value for initialization but initialize both states from the same fresh value instead.

Once asynchronous updates get involved things get even more interesting in terms of the number of renders:

Two renders:

import { useEffect, useState } from 'react';
// React 17.0.2 (no batching of asynchronous updates)

// Emulate a fetch
const getUserNames = () => {
  const executor = (resolve, _reject) => {
    const reply = () => resolve(['Prashant', 'Sunny', 'Bucky']);
    setTimeout(reply, 500);
  };
  return new Promise(executor);
};

export default function App() {
  // render #1: initialization to empty
  const [user, setUser] = useState('');

  useEffect(() => {
    async function fetchData() {
      const userNames = await getUserNames();
      const name = userNames[2];
      // trigger render #2: setUser
      setUser(name);
    }
    fetchData();
  }, []);

  return <h1>{`Hello ${user}`}</h1>;
}

Four renders:

export default function App() {
  // render #1: initialization
  const [user, setUser] = useState('');
  const [greeting, setGreeting] = useState('');

  useEffect(() => {
    async function fetchData() {
      const userNames = await getUserNames();
      const name = userNames[2];
      // trigger render #3: setUser
      setUser(name);
    }
    fetchData();
  }, []);

  useEffect(() => {
    // trigger render #2 with user = ''
    // trigger render #4 with user = 'Bucky'
    setGreeting(`Hello ${user}`);
  }, [user]);
  return <h1>{ greeting }</h1>;
}

Three renders:

export default function App() {
  // render #1: initialization
  const [_user, setUser] = useState('');
  const [greeting, setGreeting] = useState('');

  useEffect(() => {
    async function fetchData() {
      const userNames = await getUserNames();
      const name = userNames[2];
      // trigger render #2: setUser
      setUser(name);
      // trigger render #3: setGreeting
      // i.e. asynchronous `setState`s are not batched
      setGreeting(`Hello ${name}`);
    }

    fetchData();
  }, []);

  return <h1>{greeting}</h1>;
}

Back to two renders:

export default function App() {
  // render #1: initialization
  const [greeting, setGreeting] = useState('');

  useEffect(() => {
    async function fetchData() {
      const userNames = await getUserNames();
      const name = userNames[2];
      // trigger render #2: setGreeting
      setGreeting(`Hello ${name}`);
    }

    fetchData();
  }, []);

  return <h1>{greeting}</h1>;
}

Picking useRef() over useState() comes down to:

Don't want to re-render when value.current is rebound to a new value - then use useRef() (Aside: another use of useRef() that doesn't reference a DOM element: handleEvent & React )
If value can change (e.g. via useEffect()) requiring a re-render then useState() has to be used.