Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import {useEffect} from 'react'
import {RecoilRoot, useRecoilState, atom} from 'recoil'
// User data
const user1 = {username: 'joe', bio: "You will never see me, unless of course this example is totally broken."}
const user2 = {username: 'bob', bio: "I am the one true user."}
const user3 = {username: 'fred', bio: "Just kidding, make way for the new guy."}
// Recoil atom to store user. The default user is user1, but it will be
// replaced when the effect runs
const userState = atom({
key: 'user',
default: user1,
effects_UNSTABLE: [
({setSelf}) => {
setSelf(user2)
}
]
})
// Component to display user info
function User() {
const [user, setUser] = useRecoilState(userState)
// Show recoil is alive by setting to user3 after a bit
useEffect(() =>
setTimeout(() => setUser(user3), 2000)
, [])
return <div>
<strong className='username'>{user.username}</strong>
<p className='bio'>{user.bio}</p>
</div>
}
export default function Home() {
return (
<RecoilRoot>
<User />
</RecoilRoot>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment