React Recoil example

CountAtom.js

import { atom } from 'recoil'

// The key can be any unique value
// Default is the initial value
const countState = atom({
	key: 'countState',
	default: ''
});

export { countState }

Counter.jsx

import { useRecoilState } from 'recoil'
import { countState } from './CountAtom.js'

const Counter = () => {
	const [count, setCount] = useRecoilState(countState)
	return (
		<div> 
			<p> Clicks: {count} </p>
			<button onClick={() => setCount(c => c + 1)}> +1 </button>
		</div>
	)
}

export default Counter

main.jsx

/* RecoilRoot must be installed in your React app. The most convenient method is to put it in the main.jsx file. (Assuming you're using Vite to start your project.)

Add an import for RecoilRoot and install it as parent to <App />.
*/

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { RecoilRoot } from 'recoil'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
)