Quiero guardar el estado enlocalStorage cuando un componente está desmontado. Esto solía funcionar encomponentWillUnmount.

Intenté hacer lo mismo con eluseEffect hook, pero parece que el estado no es correcto en la función de retorno deuseEffect.

¿Porqué es eso? ¿Cómo puedo guardar el estado sin usar una clase?

Aquí hay un ejemplo ficticio. Cuando presiona cerrar, el resultado es siempre 0.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Example() {
  const [tab, setTab] = useState(0);
  return (
    <div>
      {tab === 0 && <Content onClose={() => setTab(1)} />}
      {tab === 1 && <div>Why is count in console always 0 ?</div>}
    </div>
  );
}

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

  useEffect(() => {
    // TODO: Load state from localStorage on mount

    return () => {
      console.log("count:", count);
    };
  }, []);

  return (
    <div>
      <p>Day: {count}</p>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => props.onClose()}>close</button>
    </div>
  );
}

ReactDOM.render(<Example />, document.querySelector("#app"));

CodeSandbox