Early returns and conditional hooks
Unanswered
Large oak-apple gall posted this in #help-forum
Large oak-apple gallOP
2 components share state by context (but also valid concern for state managers). First sets value, second reads value, initially undefined.
Second components needs to use hooks (react query, for example), but only if value is defined. Otherwise it should not be mounted at all.
One simple solution would be early return - just return null if value is undefined. But that makes conditional hooks and breaks react rule.
One workaround I found online is to create child component for every early return split. But it makes long and hard to read code, each child component has to keep all props from parent on top of adding its own props.
Making context layer to share data between them will create same problem as before because initial state may be undefined.
Is there better approach to solve it?
Second components needs to use hooks (react query, for example), but only if value is defined. Otherwise it should not be mounted at all.
One simple solution would be early return - just return null if value is undefined. But that makes conditional hooks and breaks react rule.
One workaround I found online is to create child component for every early return split. But it makes long and hard to read code, each child component has to keep all props from parent on top of adding its own props.
Making context layer to share data between them will create same problem as before because initial state may be undefined.
Is there better approach to solve it?
3 Replies
Large oak-apple gallOP
If it makes difference, components in this scenario should not exist simultaneously. They are swapped by parent component after setting value
You’re using React Query in second component right?
If you’re using RQ you could make use of the enabled option to only run the query when value exists.
And the second component could return null while data coming from the useQuery hook isn’t available yet or when value coming from global state isn’t set yet.
If you’re using RQ you could make use of the enabled option to only run the query when value exists.
enabled : !!value And the second component could return null while data coming from the useQuery hook isn’t available yet or when value coming from global state isn’t set yet.
@LuisLl You’re using React Query in second component right?
**If** you’re using RQ you could make use of the *enabled* option to only run the query when *value* exists.
enabled : !!value
And the second component could return null while *data* coming from the useQuery hook isn’t available yet or when *value* coming from global state isn’t set yet.
Large oak-apple gallOP
Yes, it will work when it is first or only thing after early return. But what if there are more steps with potential early return before that?
Check for undefined - return null
Transform value
Check for validity - return null
Repeat transform-check several times
Finally use transformed data in hooks
In this way each next step is meaningless without right data on current step. And without early returns all these transforms would need to be performed together at last step just to get to hooks
Check for undefined - return null
Transform value
Check for validity - return null
Repeat transform-check several times
Finally use transformed data in hooks
In this way each next step is meaningless without right data on current step. And without early returns all these transforms would need to be performed together at last step just to get to hooks