docs: refactored examples that use the logical !
#2602
Conversation
## Summary Using the bang operator (!) on non-boolean values can lead to unexpected results. For example, in the case of [this example](/basics/react-preact.md#pausing-usequery), using the `pause` option inside the `useQuery` hook, one might set the value of the `from` variable to be `0`. In that case the checks would be inaccurate since `!0 === true`. However, we only expect to pause the query only when `from` or `limit` is nullish. We can replace that condition with a more robust one. Yes, it's an edge case, but new developers reading this documentation might not be aware of the presence of this bug and might have some unexpected results using this example in their code. ## Set of changes Replaced `!from || !limit` with the more accurate `from === undefined || from === null || limit === undefined || limit === null` in the `useQuery` hook/composable on [React/Preact Basics](/basics/react-preact.md) and [Vue basics](/basics/vue.md). An intermediate variable `shouldPause` got used to avoid inlining that long condition into the `pause` option.
|
MoustaphaDev
changed the title
!
docs/basics/vue.md
Outdated
| const shouldPause = computed(() => from === undefined || from === null || | ||
| limit === undefined || limit === null); |
There was a problem hiding this comment.
| const shouldPause = computed(() => from === undefined || from === null || | |
| limit === undefined || limit === null); | |
| const shouldPause = computed(() => from == null || limit == null); |
Is a bit more terse 😅
There was a problem hiding this comment.
I admit 😂
Sacrificing the edge case for a more terse code sounds good to me
There was a problem hiding this comment.
Actually I just realized that your suggestion only applied to the basics/vue.md example. In basics/react-preact.md there's a similar example but it still has my initial suggestion. Should I open a new PR to fix that?
Co-authored-by: Jovi De Croock <decroockjovi@gmail.com>
Summary
Using the bang operator (!) on non-boolean values can lead to unexpected results. For example, in the case of this example, using the
pauseoption inside theuseQueryhook, one might set the value of thefromvariable to be0. In that case the checks would be inaccurate since!0 === true. However, we only expect to pause the query only whenfromorlimitis nullish. We can replace that condition with a more robust one.Yes, it's an edge case, but new developers reading this documentation might not be aware of the presence of this bug and might have some unexpected results using this example in their code.
Set of changes
Replaced
!from || !limitwith the more accuratefrom === undefined || from === null || limit === undefined || limit === nullin theuseQueryhook/composable on React/Preact Basics and Vue basics.An intermediate variable
shouldPausegot used to avoid inlining that long condition into thepauseoption.