[Feature] useLockedValue

[ferretwithaberet]

Hey there, I just made a somewhat useful utility. I will leave it here in case you want to add it to the lib:

Description

This utility locks a value while locked is true. Otherwise, the returned value is the same as the input value.

Utility

While using React Native with expo-router I had a bug caused by the behavior that screens are kept rendered in the background. I was using a state from a global zustand instance in the header of a screen, when navigating somewhere else, that state changed and caused an error in the unfocused screen. This utility mitigates that by keeping the value the screen had while it was focused.

Code

const useLockedValue = <TValue>(value: TValue, locked: boolean) => {
  const valueRef = useRef(value);

  useEffect(() => {
    if (locked) return;

    valueRef.current = value;
  }, [value, locked]);

  return valueRef.current;
};