Created
January 5, 2021 09:23
-
-
Save spro/3131bd4deddfc821f08c3332506a53c6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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