react-better-effect

react-better-effect

This package provides latest values in useEffect and useLayoutEffect.

TL;DR

import { useEffect } from "react-better-effect";

export default function App() {
  const [text, setText] = React.useState("a");
  const [text2, setText2] = React.useState("b");
  
  useEffect(($) => {
    const interval = setInterval(() => {
      console.log("effect1", $.text, text2 );
    }, 1000);
    return () => clearInterval(interval);
  }, [text2], { text });

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <input value={text2} onChange={(e) => setText2(e.target.value)} />
    </div>
  );
}

Demo

Please check this codesandbox example.