Write a Custom Recoil Hook to Reset a Value in the Recoil State
To change a value in state we can do that directly (by pulling the atom with useRecoildState), or we can write a custom hook that will change the value for us:
const useResetScore = () => {
const [score, setScore] = useRecoilState(gameScore)
return () => {
setScore(0)
}
}
That function returns a function that we can then call from a component like any other hook:
const resetScore = useResetScore()
and then we can use that new resetScore function for the onClick of a button:
<button onClick={resetScore}>Reset</button>
which will change the value in the Recoil state.
That's a simplistic example of a custom hook - but that hook could then be extended to do multiple state changes, and then could be imported into any component in the React tree and used.
Chris Achard: [0:01] You have a game now where we can click on the paper to make it bigger, get some gems, and get a score, but we don't have any way to reset that score. We could do that right in the game file with setScore here. Say we want to do that somewhere else, like in the score label.
[0:15] If we open up score here, we're just using the value. We could pull state also from here, but there's another way we can do that, and that's by making a custom Recoil hook.
[0:24] Let's just go to our atoms for now. Let's make a custom hook that we're going to use. We're going to have const, and you may just want to call this resetScore, but you'll see why we're going to change that in a minute here.
[0:36] If we just call it resetScore, then we import useRecoilState, which is what we have to do to get the state and the setState. We can have const [score, setScore] = useRecoilState() and we're going to use this gameScore object here.
[0:57] If we just do that, we've just violated one of the rules of hooks. We're using a hook inside of something that we're not calling a hook. Instead, we have to call this useResetScore. This has to be a hook. What that means is we can't just call setScore right here because we're using a hook. We're going to import this hook into the score label.
[1:19] Instead, we have to return a function. We're going to return a function, which is our hook function. From that, we're going to call setScore.
[1:28] We've created a custom hook. Now we can export that, and it returns a function that will reset the score. Let's go into score.js and we can pull that from the atoms as well. We're importing that. Now, we can use that like any other hook.
[1:44] We could call a function here resetScore to be useResetScore(). We're going to call it here. We can put a button down here and we'll say Reset. The onClick of that button can be resetScore. That will call our hook, which will call the setScore to .
[2:09] Now we have a Reset button here. Let's count up a little bit. If we click the reset, we go back to . I've just used a custom hook in Recoil to reset the score.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!