React hooks initially allow you to "hook into" React state and lifecycle features, like we used to do with the componentDidMount or componentWillUn...
For further actions, you may consider blocking this person and/or reporting abuse
I suggest you memoize the updateValue API because now it's being recreated on every rerender (state change).
You can use a ref for that, let's say:
I hope this makes sense, writing code on a phone is rly hard π₯΅
Or you just could use useMemo() for this, much easier:
You don't need setValue as a dep (because it's part of useState). I'd probably say useRef is better but you'd do it similarly to how you have.
That being said I generally just use useState without any Boolean hook.
You're right, I think useRef makes sense in this case and the way you used it. Thanks for pointing that out.
Why not just
?
It is a good practice to use the "function" form since the new value depends on the previous statue value. In most cases, both solutions will work correctly, but it is possible to have some kind of desynchronization (and so unexpected behaviors) when using your version.
A few keys here (though it is not exactly the same question as you) : stackoverflow.com/questions/610542...
That "desynchronization" occurs because of states mutations are asynchronous, and it shouldn't be treated as a problem nor unexpected behavior.
well yes but actually no
const updateValue = useRef({
toggle: () => setValue(oldValue => !oldValue),
on: () => setValue(true),
off: () => setValue(false)
})
Why do we need useRef here instead of just return each function separately ?
The goal of
useRef
is to make sure that these functions are not recreated every time theuseBoolean
hook is called. Internally, it is nothing more that a function call, and this function could actually be called many times if your component renders a lot.By using
useRef
, we reuse the functions we created earlier without recreating them, which should improve the performance (though I didn't run any benchmarks by myself, so the performance gain might be big or small, but it is still a good practice).Depending on the size of your application, removing
useRef
and returning the functions directly might not have any impact at all (or might even be faster, who knows).Hope this helps, don't hesitate if something was not clear. :)
I don't know if we need an abstraction over a boolean value?
Thanks for your comment! Indeed, we probably don't need so much abstraction (though it can simplify the overall code in a way). This one was more for educational purposes to understand the logic behind creating custom hooks, in order to implement more complex ones. π
HI @ludal , Are you aware that fluentui already has this exact hook... npmjs.com/package/@fluentui/react-...
Hi Oliver, I didn't know about Fluent UI, but I know that Chakra UI also has such a hook (more info here), as well as other packages I guess. π