#2298·Recoil

If value is a NaN, it causes an infinity render

Author: bhbsCreated Dec 30, 2023Updated Mar 18, 2024

same as #2280

React version: v18.2.0

Reproduction

https://github.com/bhbs/recoil-repro-2298

javascript
import { atom, useRecoilValue } from "recoil";

const Atom = atom({
  key: "someKey",
  default: NaN,
});

function App() {
  const recoilValue = useRecoilValue(Atom);
  return <div>{String(recoilValue)}</div>;
}

export default App;

Current behavior

image

Expected behavior

Rendered successfully

How to fix

State should be compared using Object.is

https://github.com/facebookexperimental/Recoil/blob/c1b97f3a0117cad76cbc6ab3cb06d89a9ce717af/packages/recoil/adt/Recoil_Loadable.js#L52-L55

should be

javascript
return (
  // $FlowFixMe[prop-missing]
  other.state === this.state && Object.is(other.contents, this.contents)
);

Note

Problems in similar situations

Source: facebookexperimental/Recoil