react-use-controlled-state.js

use-controlled-state.js

import { useState, useEffect, useRef } from "react";

export function useControlledState(initialState) {
  const [state, setState] = useState(initialState);
  const stateRef = useRef(initialState);

  useEffect(() => {
    if (initialState !== stateRef.current) {
      setState(initialState);
      stateRef.current = initialState;
    }
  }, [initialState]);

  return [state, setState];
}