next-recoil-effects.js

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>
    )
}