This repository has been archived by the owner on Jan 1, 2025. It is now read-only.
Atoms don't update when using react-hot-loader #247
Assignees
Labels
bug
Something isn't working
Comments
|
What's an inline atom? |
|
@aappddeevv defined in the same file of its component. const state = atom({key: 'key', default: 1});
export function Comp() {
...
} |
|
@naivefun - Using atoms defined in the same module as a component that uses it is a very common pattern. Perhaps there is something else unique about your environment? |
|
I am also seeing this behavior. Again, this is only a problem with hot reloading. Currently I'm storing my atoms on the window object (using |
|
This is breaking with hot reload /**
* Dependencies
*/
import React, { useCallback, useState } from "react";
import styled from "styled-components/macro";
import pickBy from "ramda/src/pickBy";
import pathEq from "ramda/src/pathEq";
import toPairs from "ramda/src/toPairs";
import append from "ramda/src/append";
import identity from "ramda/src/identity";
import memoizeWith from "ramda/src/memoizeWith";
import { atom, useRecoilState } from "recoil";
import ComponentListBox from "./component-listbox";
/**
* States
*/
const nodeWithPath = memoizeWith(identity, (path) =>
atom({
key: path,
default: [],
})
);
/**
*
*/
const StyledTree = styled.ul``;
const StyledNode = styled.li``;
const StyledEmptyNode = styled.li``;
/**
* node: [{meta, properties}]
*/
const Node = ({ path }) => {
const [node, setNode] = useRecoilState(nodeWithPath(path));
const [addComponent, setAddComponent] = useState(null);
const handleAppendComponent = useCallback(
(meta) => {
setNode((oldNode) =>
append(
{
meta,
nodes: toPairs(
pickBy(pathEq(["type", "name"], "node"), meta.props)
),
properties: {},
},
oldNode
)
);
setAddComponent({ displayName: "" });
},
[setNode]
);
const handleChangeComponent = useCallback(
(meta, index) => {
setNode((oldNode) =>
append(
{
meta,
nodes: toPairs(
pickBy(pathEq(["type", "name"], "node"), meta.props)
),
properties: {},
},
oldNode
)
);
setAddComponent({ displayName: "" });
},
[setNode]
);
return (
<>
{node.map((component, iComponent) => (
<StyledNode key={iComponent}>
<ComponentListBox
value={component.meta}
onChange={(meta) => handleChangeComponent(meta, iComponent)}
/>
{component.nodes.length > 0 && (
<ul>
{component.nodes.map((propNode, iPropNode) => (
<li key={iPropNode}>
<Node path={`${path}.${iComponent}.${propNode[0]}`} />
</li>
))}
</ul>
)}
</StyledNode>
))}
<StyledEmptyNode>
<ComponentListBox
onChange={handleAppendComponent}
label="Add a new component"
value={addComponent}
/>
</StyledEmptyNode>
</>
);
};
/**
* Component
*/
const Tree = ({ onSelectComponent }) => {
return (
<StyledTree>
<Node path="." />
</StyledTree>
);
};
export default Tree;with this error when hot reloading |
|
Can also confirm. Steps to reproduce:
Replace the contents of run with
The actual issue (see Issue #213) is a duplicate atom error. |
|
@ericgla you should move that atom out of Additionally, if you don't need that atom to be shared, you should just use the normal React |
|
I agree that the atom should be moved outside of App in a normal application, but I wanted to give a concise set of steps to illustrate the issue. While moving the atom out of Commit 2ed203f makes the deconstructed error property optional and corrects the issue. In the meantime, modifying line 191 in `recoil.development.js' to add a null error will fix the issue until the next release. |
|
The error message should be fixed with #199. An atom should never be defined in a render function. They need to persist across renders to refer to the same state. Creating an atom is really a side-effect that is forbidden in React render functions. |
drarmstr
changed the title
|
I just tried it with Once a I suppose once you found a way for |
|
Any known fixes or workaround for this? Every code change requires manual refresh in the browser to get things working again which means clicking between VSCode and Browser -- painfully repetitive. |
|
I also get this error (using NextJS) |
|
Need to refresh every time I save my test project Please check this sample login.js App.js For the error am i doing it correctly? |
|
I am experiencing the same duplicate atom key error: I am using CRA and only started seeing the error and having HMR issues when I bumped to the latest react-scripts version. I downgraded to react-scripts@^3.4.3 while this is getting worked on and that resolved my issues for now. This won't work for some if they are reliant on some of the new react-script features. For those that are not, a downgrade (only as a temporary solution) may do the trick if you are good with sacrificing HMR. |
|
same problem here, could anybody help @drarmstr @csantos4242? |
|
I don't know if react-hot-loader or react-fast-refresh can be used without webpack, but if used with webpack (eg. create-react-app) you can prevent this warning by adding Clearly not optimal if you define an atom in every component but working great with a centralized state module. |
|
@tkassala i added this to place where i define my atoms: still no luck. any ideas? can you show your sample usage? |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
inline atom with component will cause strange behavior, not reload the 1st time, but refresh the full page on the 2nd change.
The text was updated successfully, but these errors were encountered: