\\n {message}\\n
\\n );\\n }\\n}\\n\")), mdx(\"p\", null, \"Or regular JavaScript functions (not called inside a functional component):\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"function getState() {\\n const messageState = useState( '' );\\n return messageState;\\n}\\nconst [message, setMessage] = getState();\\nconst Message = () => {\\n /* ... */\\n}\\n\")), mdx(\"p\", null, \"You\\u2019ll get an \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://legacy.reactjs.org/warnings/invalid-hook-call-warning.html\"\n }, \"error\"), \". The first rule means that even inside functional components, you shouldn\\u2019t call useState in loops, conditions, or nested functions because React relies on the order in which useState functions are called to get the correct value for a particular state variable.\"), mdx(\"p\", null, \"In that regard, the most common mistake is to wrap useState calls in a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://blog.logrocket.com/react-conditional-rendering-9-methods/\"\n }, \"conditional statement\"), \" (they won\\u2019t be executed all the time):\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"if (condition) { // Sometimes it will be executed, making the order of the useState calls change\\n const [message, setMessage] = useState( '' );\\n setMessage( aMessage ); \\n}\\nconst [list, setList] = useState( [] );\\nsetList( [1, 2, 3] );\\n\")), mdx(\"p\", null, \"A functional component can have many calls to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useState\"), \" or other Hooks. Each Hook is stored in a list, and there\\u2019s a variable that keeps track of the currently executed Hook.\"), mdx(\"p\", null, \"When \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useState\"), \" is executed, the state of the current Hook is read (or initialized during the first render), and then, the variable is changed to point to the next Hook. That\\u2019s why it is important to always maintain the Hook calls in the same order. Otherwise, a value belonging to another state variable could be returned.\"), mdx(\"p\", null, \"In general terms, here\\u2019s an example of how this works step by step:\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"React initializes the list of Hooks and the variable that keeps track of the current Hook\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"React calls your component for the first time\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"React finds a call to useState, creates a new Hook object (with the initial state), changes the current Hook variable to point to this object, adds the object to the Hooks list, and returns the array with the initial state and the function to update it\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"React finds another call to useState and repeats the actions of the previous step, storing a new Hook object and changing the current Hook variable\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"The component state changes\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"React sends the state update operation (performed by the function returned by useState) to a queue to be processed\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"React determines it needs to re-render the component\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"React resets the current Hook variable and calls your component\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"React finds a call to useState, but this time, since there\\u2019s already a Hook at the first position of the list of Hooks, it just changes the current Hook variable and returns the array with the current state, and the function to update it\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"React finds another call to useState and because a Hook exists in the second position, once again, it just changes the current Hook variable and returns the array with the current state and the function to update it\")), mdx(\"h2\", {\n \"id\": \"further-reading\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#further-reading\",\n \"aria-label\": \"further reading permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Further Reading\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD83D\\uDCC4 Official React documentation: \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://react.dev/reference/react/useState\"\n }, \"useState\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD83D\\uDCC4 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://dev.to/johnstonlogan/react-hooks-barney-style-1hk7\"\n }, \"useState() vs setState() - Strings, Objects, and Arrays\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD83D\\uDCC4 \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"Advanced material\"), \" - includes concepts of future sections. \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://blog.logrocket.com/guide-choosing-right-react-state-management-solution/\"\n }, \"A guide to choosing the right React state management solution\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD83D\\uDC69\\u200D\\uD83D\\uDCBB\\uD83E\\uDDD1\\u200D\\uD83D\\uDCBB Exercises: \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.clientside.dev/blog/react-use-state-practice-exercises\"\n }, \"Practice React's useState hook with 8 Interactive Exercises\"))), mdx(\"h2\", {\n \"id\": \"notes\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#notes\",\n \"aria-label\": \"notes permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Notes\"), mdx(\"p\", null, \"Most of the documentation provided in this section comes from this tutorial - \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://blog.logrocket.com/guide-usestate-react\"\n }, \"useState in React: A complete guide\")));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":2,"value":"Introduction to React Hooks"},{"depth":3,"value":"What are React Hooks?"},{"depth":3,"value":"State Hooks"},{"depth":2,"value":"Goals"},{"depth":2,"value":"Basic tools"},{"depth":2,"value":"Contents"},{"depth":3,"value":"UseState"},{"depth":3,"value":"What can useState hold?"},{"depth":3,"value":"Updating objects and arrays in useState"},{"depth":3,"value":"What does the React.useState do?"},{"depth":3,"value":"Declaring state, update state, state variable"},{"depth":4,"value":"Exercises* π©βπ»π§βπ»:"},{"depth":4,"value":"Additional material on these subjects:"},{"depth":3,"value":"Rules for using useState"},{"depth":2,"value":"Further Reading"},{"depth":2,"value":"Notes"}]}},"pageContext":{"slug":"/react-js/states/","prev":{"label":"Introduction","link":"/react-js/introduction"},"next":{"label":"Events & forms","link":"/react-js/events-forms"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/react-js/states.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}