Description
One general optimization we could do is to eagerly call the render function during propagation and see if the render yields a different result and only if it does do we clone the path to it.
Another way to look at this selector is that it's just a way to scope a part of that eager render. Another way could be to have a hook that isolates only part of the rerender.
let x = expensiveFn(props);
let y = useIsolation(() => {
let v = useContext(MyContext);
return selector(v);
});
return <div>{x + y}</div>;The interesting thing about this is that it could also be used together with state. Only if this context has changed or if this state has changed and that results in a new value, do we rerender.
let x = expensiveFn(props);
let y = useIsolation(() => {
let [s, ...] = useState(...);
let v = useContext(MyContext);
return selector(v, s);
});
return <div>{x + y}</div>;Another way to implement the same effect is to just memoize everything else instead.
let x = useMemo(() => expensiveFn(props), [props]);
let [s, ...] = useState(...);
let v = useContext(MyContext);
let y = useMemo(() => selector(v, s), [v, s]);
return useMemo(() => <div>{x + y}</div>, [x, y]);It's hard to rely on everything else being memoized today. However, ultimately I think that this is where we're going. Albeit perhaps automated (e.g. compiler driven).
If that is the case, I wonder if this API will in fact be necessary or if it's just something that we get naturally for free by memoizing more or the other parts of a render function.
Originally posted by @sebmarkbage in #119 (comment)
well this post make me so interested
there were many good replies to this post by saying that it's so easier to isolte hook instead of memoizing all other parts
and there is only one problem on using useIsoltion as writes above which is this can break rules of hooks and I will give you an easy way to prevent breaking rules of hooks
using a hook creator named createIsolateHook like
const useIsoltedUser = makeIsoltedHook(useUser)this approach will also preventing isolated hook to use other scoped variables of component like setState or state without passing explicitly to our isolated hook