illustration for Getting Started with Recoil in React
Course

Getting Started with Recoil in React

  5. 5
    Write a Custom Recoil Hook to Reset a Value in the Recoil State
    2m 21s

Write a Custom Recoil Hook to Reset a Value in the Recoil State

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet

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.

View code for this lesson

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.