useFreshRef

About

Avoid stale state in callbacks with this hook. Auto updates values using a ref.

Examples

import "./styles.css";
import { useFreshRef } from "rooks";
import { useState, useEffect } from "react";

export default function App() {
  const [value, setValue] = useState(0);
  function increment() {
    setValue(value + 1);
    console.log("here");
  }
  const freshIncrementRef = useFreshRef(increment);

  useEffect(() => {
    function tick() {
      freshIncrementRef.current();
    }
    const intervalId = setInterval(tick, 1000);
    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <div className="App">
      <h1>useFreshRef example</h1>
      <h2>value: {value}</h2>
    </div>
  );
}

Arguments

Argument valueTypeDescription
valueTThe value which needs to be fresh at all times. Probably best used with functions
preferLayoutEffectbooleanShould the value be updated using a layout effect or a passive effect. Defaults to false.

Returns

Return valueTypeDescriptionDefault value
refRefObjectA ref containing the fresh value() => null

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

Powered by vercel