unnecessary re-renderings

Please examine this code snippet.

The content of the snippet is simple and looks like this:

import React from "react";

import { atom, useRecoilValue } from "recoil";

const exampleState = atom({
  key: "exampleState",
  default: "some value"
});

export default function App() {
  const value = useRecoilValue(exampleState);

  console.log("check render");  // it logs 4 times

  return <div>{value}</div>;
}

There is nothing special (I guess), one atom and one useRecoilValue inside the only component. The problem is that the console.log that we have in the component logs 4 times

useRecoilValue (without updating the atom) re-renders the component (which uses it) 4 times in the beginning. If we change our code a little bit to have further updates of the atom we can see 2 more logs after each update 😕

import React, { useEffect } from "react";

import { atom, useRecoilState } from "recoil";

const exampleState = atom({
  key: "exampleState",
  default: "some value"
});

export default function App() {
  const [value, setValue] = useRecoilState(exampleState);

  useEffect(() => {
    const timerId = setInterval(() => {
      setValue("other value");
    }, 2000);

    return () => clearInterval(timerId);
  }, [setValue]);

  console.log("check render"); // it logs 4 times at the beginig
  // plus 2 more logs after atom's every update

  return <div>{value}</div>;
}

Here is the snippet for this one.

In the ideal (normal) case I suspect to see one log (with ‘some value’) and after about 2 seconds one more log (with ‘other value’) and that’s all because further updates don’t change the value.

I’ve found this issue and some others related to it, but they are about selector optimization. Here we have not any selector, there is just one atom and its usage in the component (via useRecoilValue/useRecoilState)

[davidmccabe]

Ah, an extra render on mount is expected when using React 16. It is eliminated when using new experimental React APIs.

[suren-atoyan]

But there is a huge improvement regarding further updates

1. we get just one update after each setValue
2. we don’t get any update if the new value is equivalent to the previous one

So, that’s really great 🎉 only remains the initial render issue