How is a null returning component different than custom hook?
Answered
Fire ant posted this in #help-forum
Fire antOP
I have a basic query.
Supposing I have a custom hook and null returning component doing exact same thing in both.
Apart from changing the render phase a little cause I believe react just ignores null components during commit phase but will execute the logic in the component during render phase.
then the ultimate question I have is How is react component returning null different from that of a custom hook from react library/react compiler perspective? Does react just ignore null returning component during reconciliation/commiting phase? if not what does it do with it? Any pointer to any doc or react source code will also be of much help.
Just trying to clear out some misunderstanding here if I have any.
Supposing I have a custom hook and null returning component doing exact same thing in both.
Apart from changing the render phase a little cause I believe react just ignores null components during commit phase but will execute the logic in the component during render phase.
then the ultimate question I have is How is react component returning null different from that of a custom hook from react library/react compiler perspective? Does react just ignore null returning component during reconciliation/commiting phase? if not what does it do with it? Any pointer to any doc or react source code will also be of much help.
Just trying to clear out some misunderstanding here if I have any.
Answered by joulev
honestly i feel we are getting too deep into the little react implementation details here, i dont think in real world scenarios these two would pose any significant differences, so just choose what you prefer
4 Replies
@Fire ant I have a basic query.
Supposing I have a custom hook and null returning component doing exact same thing in both.
Apart from changing the render phase a little cause I believe react just ignores null components during commit phase but will execute the logic in the component during render phase.
then the ultimate question I have is How is react component returning null different from that of a custom hook from react library/react compiler perspective? Does react just ignore null returning component during reconciliation/commiting phase? if not what does it do with it? Any pointer to any doc or react source code will also be of much help.
Just trying to clear out some misunderstanding here if I have any.
i have no answers to you but here are some of my thoughts which i think you can experiment more
* a clear benefit of a null component is that it is usable in a server component. so you can just import it into the server component directly.
* if you use the hook in a component A, the hook will rerun (of sort) whenever A rerenders, but if you use it in component B (returning null) and use B inside A, then A's rerenders will not necessarily cause the hook to run (think
* a clear benefit of a null component is that it is usable in a server component. so you can just import it into the server component directly.
* if you use the hook in a component A, the hook will rerun (of sort) whenever A rerenders, but if you use it in component B (returning null) and use B inside A, then A's rerenders will not necessarily cause the hook to run (think
memo or react compiler)Fire antOP
yeah but hooks will run if the props to B changes right?
I am thinking more like following
instead of
I am thinking more like following
function Parent() {
return (
<>
{condition && <NullReturningComponent />}
<SomeOtherComponent />
</>
);
}
function NullReturningComponent() {
useSomething();
return null;
}
function useSomething({ condition, ...restProps }) {
useEffect(() => {
// do something;
});
}instead of
function useSomething({ input }) {
useEffect(() => {
if (condition) {
// do something;
} else {
// dont do anything;
}
});
}
function Parent() {
useSomething({ condition: conditionValue, ...restInput });
return <SomeOtherComponent />;
}honestly i feel we are getting too deep into the little react implementation details here, i dont think in real world scenarios these two would pose any significant differences, so just choose what you prefer
Answer
Fire antOP
yeah may be over thinking but want to know if there is any significant downsides of one over other. Seems like not much.