useLocal: like useState, but updates if initial value changes

useLocal.md

In situations where you initialize useState with some value and later on you want to update the state, because the parent changed, you would need to currently listen on the parent change in an useeffect and then set the state to update it, or more precisely, update the local version.

For this a hook I use quite often for forms or temporarily updated values is the useLocal hook.

Let's take this example

const RangeDatepicker = ({ value: { from, to }, onChange }) => {
   const [from, setFrom] = useLocal(from)
   const [to, setTo] = useLocal(to)
   const update = () => {
    if (from && to) {
      onChange({ from, to });
    }
   }
   
   useEffect(update, [from, to])
   
   return <MyCalendarRangePicker from={from} to={to} onChangeFrom={setFrom} onChangeTo={setTo} />
}

It works as follows.

1. the controlling component sets from and to
2. the RangeDatepicker copies the initial values
3. On every change of the RangeDatepicker, locally values are updated, but not propagated back
4. When both values (from and to) are set correctly, the onChange will be triggered
5. the parent then updates the local values using the inner logic of useLocal
6. the parent can always decide to override local values in a controlled manner

Notes

Note that the parent would always override the local version if it would be for example an object that is genreated on each render. So make sure, when you are creating computed values in an object, that the computed value must be memoized, when you are using this hook

useLocal.ts

import { useState, useEffect, Dispatch, SetStateAction } from 'react';

export function useLocal<S>(
  remote: S | (() => S),
): [S, Dispatch<SetStateAction<S>>] {
  const [data, setData] = useState(remote);
  useEffect(() => setData(remote), [remote]);
  return [data, setData];
}

useLocalConditional.ts

import { useState, useEffect, Dispatch, useRef } from 'react';

type CheckFunc<S> = (nextRemoteValue: S, currentLocalValue: S) => boolean;

export function useLocal<S>(
  remote: S,
  condition?: CheckFunc<S>,
): [S, Dispatch<S>] {
  const [data, setData] = useState(remote);

  const canUpdateRef = useRef<undefined | ((nextVal: S) => boolean)>();
  canUpdateRef.current = condition
    ? (next: S) => condition(next, data)
    : undefined;

  useEffect(() => {
    if (canUpdateRef.current && !canUpdateRef.current(remote)) {
      return;
    }
    setData(remote);
  }, [remote]);
  return [data, setData];
}