isolation-hook and a new pattern to pass hooks to another(hook or hook creator)

[mh-alahdadian]

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

[mh-alahdadian]

@dai-shi
@theKashey
@GasimGasimzada

I think that you might be participate

thanks in advance

[theKashey]

For me one of the current limitations of hook is that any change triggers a whole thing.
useMemo or useCallback are helping, but if they depend on some data from outside (like context) - any update will still trigger a whole thing, even if it should not.
Isolating hooks from each other would allow better performance with a simpler code.

I hope even "double updates" are not a problem if react core will handle everything.

[gaearon]

Hi, thanks for your suggestion. RFCs should be submitted as pull requests, not issues. I will close this issue but feel free to resubmit in the PR format.

[Ayc0]

@mh-alahdadian I opened #257 as this RFC was closed