We'll create a new bit of shared state (called an "atom" in Recoil) by importing atom
from Recoil and setting a unique key and default value:
import {
atom
} from 'recoil'
const gameScore = atom({
key: 'gameScore',
default: 0
})
Then we can use that gameScore
by calling the Recoil hook useRecoilState
import {
useRecoilState
} from 'recoil'
...
const [score, setScore] = useRecoilState(gameScore)
That looks a lot like a local useState
call - but is different because it creates the state in Recoil, which can then be used in this component, or in any other component in the tree (underneath the same RecoilRoot
)