useOriginalCopy
Opened this issue · 0 comments
otakustay commented
This is an interesting hook to cast a custom equal object to reference equal, suppose we have a simple fetch component:
const View = ({params}) => {
const [value, setValue] = useState(null);
useEffect(
() => {
setValue(null);
fetchResource(params).then(setValue);
},
[params]
);
return value && <span>{value}</span>
};
We'd like fetchResource
to start only when params
has a different content, "different object with same content" should not trigger a fetch, however useEffect
compares params
by its reference and will trigger fetch even they have the same content.
By introducing a simple useOriginalCopy
hook:
const useOriginalCopy = <T>(value: T, equals: (x: T, y: T) => boolean): T => {
const copy = useRef(value);
if (!equals(copy.current, value)) {
copy.current = value;
}
return copy.current;
};
We can retrieve back the first reference of params
:
const View = ({params}) => {
const [value, setValue] = useState(null);
const originalParams = useOriginalCopy(params, deepEqual);
useEffect(
() => {
setValue(null);
fetchResource(originalParams).then(setValue);
},
[originalParams]
);
return value && <span>{value}</span>
};