"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", h2: "h2", li: "li", p: "p", pre: "pre", ul: "ul", ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["If you're using React Hooks you might encounter a scenario where your\n", _jsx(_components.code, { children: "useState" }), " hook doesn't appear to be updating the value. This can occur\nwhen you're mutating the state value in place and then calling ", _jsx(_components.code, { children: "setState" }), ".\nReact performs a quick comparison so it will bail out of an update when\nthe object instance is the same which will result in a stale value."] }), "\n", _jsx(_components.p, { children: "Later on, if something else causes a rerender of the component you will\nsuddenly see the fresh state leaving you scratching your head." }), "\n", _jsxs(_components.p, { children: ["Consider the following example which illustrates the issue. It's a component\nthat adds a number to the array whenever the button is clicked. After\nthe button is clicked 3 times it should show: ", _jsx(_components.code, { children: "1,2,3" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React, { useState } from 'react'\n\nfunction Numbers() {\n const [numbers, setNumbers] = useState([])\n\n const addToNumbers = () => {\n numbers.push(numbers.length)\n setNumbers(numbers)\n }\n\n return (\n

{numbers.join(',')}

\n \n

\n )\n}\n" }) }), "\n", _jsx(_components.p, { children: "If you were to render this component and click the button three times\nyou'd see that there is no number update happening." }), "\n", _jsxs(_components.p, { children: ["Since ", _jsx(_components.code, { children: "addToNumbers" }), " is mutating the state value directly it won't\nbe properly updated. If you avoid mutation and instead clone the\nstate array of numbers you will see rendering occur as you expect:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React, { useState } from 'react'\n\nfunction Numbers() {\n const [numbers, setNumbers] = useState([])\n\n const addToNumbers = () => {\n setNumbers([...numbers, numbers.length])\n }\n\n return (\n

{numbers.join(',')}

\n \n

\n )\n}\n" }) }), "\n", _jsx(_components.h2, { id: "all-together", children: _jsx(_components.a, { href: "#all-together", children: "All together" }) }), "\n", _jsx(_components.p, { children: "I've created a CodeSandbox example that uses both methods of state\nsetting with different buttons. It's interesting to see because\nyou can click the array mutation version twice, and then the array\nmutation version, and then see the proper numbers render." }), "\n", _jsxs(_components.p, { children: ["This is a result of the mutation version ", _jsx(_components.em, { children: "properly" }), " setting the new\nstate. Though, React doesn't think a new value exists so it doesn't\nactually rerender."] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://codesandbox.io/s/9jr5nx234p", children: "See the CodeSandbox in action" }) }), "\n", _jsx(_components.h2, { id: "resources", children: _jsx(_components.a, { href: "#resources", children: "Resources" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://reactjs.org/docs/hooks-reference.html#usestate", children: "https://reactjs.org/docs/hooks-reference.html#usestate" }) }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

React Hooks and stale state