STOP Using Recoil, Use This Instead!

Key Concepts

• State Management: Managing application data and how it changes over time.
• Atomic State: The smallest unit of state that can be independently updated.
• Derived Data: Data computed from one or more atomic states.
• Asynchronous Data: Data fetched from an external source, like an API.
• Event Listeners: Mechanisms to react to changes in state.
• React Hooks: Functions that let you “hook into” React state and lifecycle features from function components.
• Observables: Data streams that emit values over time.
• Selectors: Functions that derive data from state.
• Atoms: Independent units of state in Recoil and Jotai.
• Atom Families: Functions that create atoms on demand, parameterized by a key.
• Suspense: A React component that handles asynchronous operations.

Recoil State Manager (Maintenance Mode)

• Recoil is in maintenance mode, necessitating a search for alternatives.
• The video demonstrates a test app showcasing core state management functionalities:
  • Maintaining atomic state (count).
  • Deriving data (double count).
  • Externally incrementing the count.
  • Handling asynchronous data (fetching user data).
  • Implementing event listeners.

Recoil Implementation

• Atomic State Definition: atom is used to define state, e.g., countState initialized to 0.
• Derived Data: selector function creates a new atom derived from the original countState atom.
• Event Listeners: useEffect hook is used to listen for changes in the user ID atom and log the new value.
• Asynchronous Data Fetching: selectorFamily is used to create a selector that fetches user data based on the user ID. This manages the asynchronous operation as a promise.
• React Hooks:
  • useRecoilState is used for mutable data, providing both the value and a setter.
  • useRecoilValue is used for read-only derived data.
• Asynchronous Component: The User component fetches data asynchronously using useRecoilValue and the userQuery selector family. The component is wrapped in Suspense to handle the loading state.

Legend State

• Legend State is presented as a fast and lean alternative to Recoil.
• Atomic State: observable from Legend App State is used to create atomic state, e.g., count.
• Derived Data: A function within observable defines derived data, automatically updating when the source data changes. Example: doubleCount is derived from count.
• Asynchronous Data: synced-fetch plugin simplifies asynchronous data fetching. It automatically fetches data when the user ID changes.
• React Hooks: useDollar (in version 3 beta) is used to access observables in React components.
• Mutation: The set method is used to update observable values, both inside and outside React components.
• Select Element: $react.select simplifies creating select elements, automatically binding the value and handling changes.
• Data Display: Data is displayed directly using user.name without needing Suspense, as synced-fetch handles the loading state.

TanStack Store

• TanStack Store is another lean state management option.
• Atomic State: store is used to create atomic state, e.g., count and user ID.
• Derived Data: derived function is used to create derived data, requiring explicit dependency declaration. Example: doubleCount depends on count.
• Asynchronous Data and Event Logging: effect is used for asynchronous operations and logging. It depends on user ID and is set to eager to run immediately.
• Mutation: setState with a mutation function is used to update the store, both inside and outside React components.
• React Hooks: useStore is used to access store values in React components.
• Select Element: Uses the same mechanism as Legend State for select box handling.
• Data Display: Data is displayed directly without Suspense.

Jotai

• Jotai is presented as a spiritual successor to Recoil, actively maintained and with a vibrant ecosystem.
• Recoil Adapter: The jotai-recoil adapter allows for a smoother transition from Recoil to Jotai by providing similar APIs.
• Atomic State: atom from Jotai is used to define atomic state, similar to Legend App State.
• Derived Data: Similar to Legend App State.
• Event Listeners: withAtomEffect is used to listen for changes in atoms.
• Asynchronous Data: atomFamily is used to create atoms for user data, similar to Recoil's selectorFamily. Asynchronous atoms are created using atom with an async Builder.
• React Hooks:
  • useAtom provides both the value and a setter.
  • useAtomValue provides only the value.
• Mutation:
  • The setter from useAtom is used to update atoms within React components.
  • store.set is used to update atoms externally.
• Context-Based Stores: Jotai supports context-based stores, allowing different sections of the app to have different sets of atoms.
• Data Display: Requires wrapping asynchronous data fetching in Suspense, similar to Recoil.

Conclusion

• The video provides three alternatives to Recoil: Legend State, TanStack Store, and Jotai.
• Legend State offers a clean and smooth experience with its synced-fetch plugin.
• TanStack Store is lean but requires explicit dependency declaration for derived data.
• Jotai is the closest replacement to Recoil, with a similar API and active maintenance.
• The presenter expresses appreciation for Recoil and its contribution to atom-based state management.