Recoil version 0.0.10 was Released! Some bugs were fixed and new features appeared.

The latest version of Recoi, version 0.0.10, was released on June 18, 2020 . Version 0.0.9 was also released on the same day, and the new Recoil Snapshot s Hooks method was renamed and immediately released as 0.0.10. This makes it possible to use Next.js-like SSR (server-side rendering) like frames The following problems that occurred in the work have been fixed successfully.

Error: Recoil version 0.0.8 in SSR - window is not defined

Recoil has more functions on Recoil Snapshots, and it support TypeScript. It becomes more useful. The detail is here.

Contents of Recoil version 0.0.10

Bug fixes

  • Fixes for Server Side Rendering, though we do not officially support it yet.
  • Fix selectors recording dependency subscriptions in some cases.
  • Fix updaters in useRecoilCallback() getting current state.
  • ix error messages when throwing certain errors in the open-source build.
  • Reduce Flow errors for open-source builds.


  • Throw error with meaningful message if user doesn't use an atom or selector with most Recoil hooks.
  • Improve testing.
  • Improve open-source build.

TypeScript Support

  • TypeScript support is being rolled into the Recoil GitHub repository instead of DefinitelyTyped to help better keep it in sync with the API.
  • You can install @Type as following. Then you need not to manage .d.ts file by yourself.
npm install @types/recoil
# or
yarn add @types/recoil

Recoil Snapshot!

A Snapshot is an immutable snapshot of the state of Recoil atoms. This is intended to standardize the API for observing, inspecting, and managing global Recoil state and derived state. It’s useful for dev tools, global state synchronization, history, and navigation.


Recoil has 4 hooks on working with Snapshot.

  • useRecoilSnapshot() - Synchronous access to snapshot
  • useRecoilCallback() - Asynchronous access to snapshot
  • useRecoilTransactionObserver() - Subscribe to snapshots of all state updates
  • useGotoRecoilSnapshot() - Update current state to match snapshot

You can know the detail.

Check how to work the Recoil Snapshot.

You can see some implementation on the GitHub.

The following coding is just for test.

import React from "react";
import {
} from "recoil";

const testState = atom({key: 'test', default: 0});

export const Test = () => {
  const [test, setSet] = useRecoilState(languageState);
  const currentSnapshot = useRecoilSnapshot();
  // Store history data
  const [history, setHistory] = React.useState({
    past: [],
    present: currentSnapshot,
  // Get current value
  console.log("currentSnapshot loadable", currentSnapshot.getLoadable(testState));
  // If you need to use async, do as following.
  // console.log(" + promise", currentSnapshot.getPromise(testState));
  useRecoilTransactionObserver_UNSTABLE(({ snapshot, previousSnapshot }) => {
    console.log("transaction current getLoadable", snapshot.getLoadable(testState));
    //console.log(" + getPromise", snapshot.getPromise(languageState));
      past: [...history.past, previousSnapshot],
      present: snapshot,
  return (
    	  <button onClick={()=>setTest(test+1)}>increase</button>

When the screen is displayed, the console will show the current value. You can get the current value synchronously with the getLoadable. The getPromise is used in case of asynchronous mode. You will get the result like this.

currentSnapshot loadable {state: "hasValue", contents: "0", getValue: ƒ, toPromise: ƒ, valueMaybe: ƒ, ...}

Every time you press the increase button on the screen, the changes are subscribed to in the useRecoilTransactionObserver_UNSTABLE, and the code in this will be executed. You can get the current value and its previous value there as well. You can also keep this as a history as shown in the example.


The Snapshots is global. So if you use Recoil Snapshot, please take care of it.

It's still new, and some of the code is unstable, so it's best to wait and see how it goes for a while.

See you!

Updated at: Thu Jun 25 2020

© 2020-presentTerms|Privacy