My First Component
- Components: UI Building Blocks
- Defining a Component
- Using a Component
My First Component
- Components: UI Building Blocks
- Defining a Component
- Using a Component
, and an (abbreviated) table of contents as an ordered list . Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown\u2014every piece of UI you see on the Web.\n\n\n",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "\n\n\nReact lets you combine your markup, CSS, and JavaScript into custom \u201ccomponents\u201d, reusable UI elements for your app. The table of contents code you saw above could be turned into a , , etc.\n\n",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "\n\nJust like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you\u2019re reading is made out of React components:\n ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ![]()
tag with src and alt attributes. ![]()
is written like HTML, but it is actually JavaScript under the hood! This syntax is called JSX, and it lets you embed markup inside JavaScript.\n![]()
\nsrc\nalt\n![]()
\nReturn statements can be written all on one line, as in this component:\nreturn ![\"Katherine](\"https://i.imgur.com/MK3eW3As.jpg\")
;\nreturn ;",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "return ;\nBut if your markup isn\u2019t all on the same line as the return keyword, you must wrap it in a pair of parentheses:\nreturn\nreturn ( );\nreturn ( );\nPitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Pitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn\nUsing a component\nNow that you\u2019ve defined your Profile component, you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:\nProfile\nGallery\nProfile\nfunction Profile() {\n return (\n \n Amazing scientists
\n \n );\n}\nWhat the browser sees\nNotice the difference in casing:\n is lowercase, so React knows we refer to an HTML tag.\n\n![]()
. In the end, this is what the browser sees:\nProfile\n![]()
\n Amazing scientists
",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " Amazing scientists
\nNesting and organizing components",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Nesting and organizing components\nComponents are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move Profile to a separate file. You will learn how to do this shortly on the page about imports.\nProfile",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nBecause the Profile components are rendered inside Gallery\u2014even several times!\u2014we can say that Gallery is a parent component, rendering each Profile as a \u201cchild\u201d. This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.\nProfile\nGallery\nGallery\nProfile\nPitfall\nComponents can render other components, but you must never nest their definitions:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nPitfall\nComponents can render other components, but you must never nest their definitions:\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nThe snippet above is very slow and causes bugs. Instead, define every component at the top level:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "The snippet above is very slow and causes bugs. Instead, define every component at the top level:\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nWhen a child component needs some data from a parent, pass it by props instead of nesting definitions.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Your React application begins at a \u201croot\u201d component. Usually, it is created automatically when you start a new project. For example, if you use CodeSandbox or if you use the framework Next.js, the root component is defined in pages/index.js. In these examples, you\u2019ve been exporting root components.\npages/index.js",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "pages/index.js\nMost React apps use components all the way down. This means that you won\u2019t only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "React-based frameworks take this a step further. Instead of using an empty HTML file and letting React \u201ctake over\u201d managing the page with JavaScript, they also generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Still, many websites only use React to add interactivity to existing HTML pages. They have many root components instead of a single one for the entire page. You can use as much\u2014or as little\u2014React as you need.\nRecap\nYou\u2019ve just gotten your first taste of React! Let\u2019s recap some key points.\nReact lets you create components, reusable UI elements for your app.\nReact lets you create components, reusable UI elements for your app.\nIn a React app, every piece of UI is a component.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "In a React app, every piece of UI is a component.\nIn a React app, every piece of UI is a component.\nReact components are regular JavaScript functions except:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Their names always begin with a capital letter.\nThey return JSX markup.\nReact components are regular JavaScript functions except:\nTheir names always begin with a capital letter.\nThey return JSX markup.\nTry out some challenges\nThis sandbox doesn\u2019t work because the root component is not exported:\nfunction Profile() {\n return (\n Hedy Lamarr's Todos
![\"Hedy](\"https://i.imgur.com/yXOvdOSs.jpg\")
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\nAnd you want to put it into your component:\nexport default function TodoList() { return ( // ??? )}\nexport default function TodoList() { return ( // ??? )}\nIf you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (\n // This doesn't quite work!\n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights\n
- Rehearse a movie scene\n
- Improve the spectrum technology\n
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "- Rehearse a movie scene\n
- Improve the spectrum technology\n \nThis is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they\u2019ll guide you to fix the markup, or you can follow the guide below.\nNote\nMost of the time, React\u2019s on-screen error messages will help you find where the problem is. Give them a read if you get stuck!\nThe Rules of JSX\n1. Return a single root element",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "The Rules of JSX\n1. Return a single root element\nTo return multiple elements from a component, wrap them with a single parent tag.\nFor example, you can use a :\n\n
Hedy Lamarr's Todos
...
\n Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you don\u2019t want to add an extra to your markup, you can write <> and instead:\n\n<>\n\n<> Hedy Lamarr's Todos
...
\n<> Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "This empty tag is called a Fragment. Fragments let you group things without leaving any trace in the browser HTML tree.\nJSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can\u2019t return two objects from a function without wrapping them into an array. This explains why you also can\u2019t return two JSX tags without wrapping them into another tag or a Fragment.\n2. Close all the tags",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "2. Close all the tags\nJSX requires tags to be explicitly closed: self-closing tags like ![]()
must become ![]()
, and wrapping tags like - oranges must be written as
- oranges
.\n![]()
\n![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:\n<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\n3. camelCase all most of the things!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "3. camelCase all most of the things!\nJSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can\u2019t contain dashes or be reserved words like class.\nclass",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "class\nThis is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of stroke-width you use strokeWidth. Since class is a reserved word, in React you write className instead, named after the corresponding DOM property:\nstroke-width\nstrokeWidth\nclass\nclassName\n\n",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "\nYou can find all these attributes in the list of DOM component props. If you get one wrong, don\u2019t worry\u2014React will print a message with a possible correction to the browser console.\nPitfall\nFor historical reasons, aria-* and data-* attributes are written as in HTML with dashes.\naria-*\ndata-*\nPro-tip: Use a JSX Converter",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "aria-*\ndata-*\nPro-tip: Use a JSX Converter\nConverting all these attributes in existing markup can be tedious! We recommend using a converter to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it\u2019s still worth understanding what is going on so that you can comfortably write JSX on your own.\nHere is your final result:\nexport default function TodoList() {\n return (\n <>\n Hedy Lamarr's Todos
\n \n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights
\n - Rehearse a movie scene
\n - Improve the spectrum technology
\n
\n \n );\n}\nRecap\nNow you know why JSX exists and how to use it in components:\nReact components group rendering logic together with markup because they are related.",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "React components group rendering logic together with markup because they are related.\nJSX is similar to HTML, with a few differences. You can use a converter if you need to.\nError messages will often point you in the right direction to fixing your markup.\nTry out some challenges\nThis HTML was pasted into a component, but it\u2019s not valid JSX. Fix it:\nexport default function Bio() {\n return (\n \n Welcome to my website!
\n \n ",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "
\n Welcome to my website!
\n \n \n You can find my thoughts here.\n
\n And pictures of scientists!\n
\n );\n}\nWhether to do it by hand or using the converter is up to you!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Keeping Components Pure\nSome JavaScript functions are pure. Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow.\nYou will learn\nWhat purity is and how it helps you avoid bugs\nHow to keep components pure by keeping changes out of the render phase",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "How to keep components pure by keeping changes out of the render phase\nHow to use Strict Mode to find mistakes in your components\nPurity: Components as formulas\nIn computer science (and especially the world of functional programming), a pure function is a function with the following characteristics:\nIt minds its own business. It does not change any objects or variables that existed before it was called.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Same inputs, same output. Given the same inputs, a pure function should always return the same result.\nYou might already be familiar with one example of pure functions: formulas in math.\nConsider this math formula: y = 2x.\nIf x = 2 then y = 4. Always.\nIf x = 3 then y = 6. Always.\nIf x = 3, y won\u2019t sometimes be 9 or \u20131 or 2.5 depending on the time of day or the state of the stock market.\nIf y = 2x and x = 3, y will always be 6.\nIf we made this into a JavaScript function, it would look like this:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "If we made this into a JavaScript function, it would look like this:\nfunction double(number) { return 2 * number;}\nfunction double(number) { return 2 * number;}\nIn the above example, double is a pure function. If you pass it 3, it will return 6. Always.\ndouble\n3\n6\nReact is designed around this concept. React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Recipe({ drinkers }) {\n return (\n \n - Boil {drinkers} cups of water.
\n - Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.
\n - Add {0.5 * drinkers} cups of milk to boil and sugar to taste.
\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function App() {\n return (\n \n Spiced Chai Recipe
\n For two
\n For a gathering
\n \n );\n}\nWhen you pass drinkers={2} to Recipe, it will return JSX containing 2 cups of water. Always.\ndrinkers={2}\nRecipe\n2 cups of water\nIf you pass drinkers={4}, it will return JSX containing 4 cups of water. Always.\ndrinkers={4}\n4 cups of water\nJust like a math formula.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "drinkers={4}\n4 cups of water\nJust like a math formula.\nYou could think of your components as recipes: if you follow them and don\u2019t introduce new ingredients during the cooking process, you will get the same dish every time. That \u201cdish\u201d is the JSX that the component serves to React to render.\nIllustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Illustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences\nReact\u2019s rendering process must always be pure. Components should only return their JSX, and not change any objects or variables that existed before rendering\u2014that would make them impure!\nHere is a component that breaks this rule:\nlet guest = 0;",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Cup() {\n // Bad: changing a preexisting variable!\n guest = guest + 1;\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n . Some frameworks do this by default.\n\nLocal mutation: Your component\u2019s little secret",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "\nLocal mutation: Your component\u2019s little secret\nIn the above example, the problem was that the component changed a preexisting variable while rendering. This is often called a \u201cmutation\u201d to make it sound a bit scarier. Pure functions don\u2019t mutate variables outside of the function\u2019s scope or objects that were created before the call\u2014that makes them impure!",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "However, it\u2019s completely fine to change variables and objects that you\u2019ve just created while rendering. In this example, you create an [] array, assign it to a cups variable, and then push a dozen cups into it:\n[]\ncups\npush\nfunction Cup({ guest }) {\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaGathering() {\n const cups = [];\n for (let i = 1; i <= 12; i++) {\n cups.push(\u2019s CSS class to \"night\" during the time from midnight to six hours in the morning, and \"day\" at all other times. However, it doesn\u2019t work. Can you fix this component?\n\n\"night\"\n\"day\"\nYou can verify whether your solution works by temporarily changing the computer\u2019s timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!\nexport default function Clock({ time }) {",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function Clock({ time }) {\n const hours = time.getHours();\n if (hours >= 0 && hours <= 6) {\n document.getElementById('time').className = 'night';\n } else {\n document.getElementById('time').className = 'day';\n }\n return (\n \n {time.toLocaleTimeString()}\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Reusing Logic with Custom Hooks\nReact comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you\u2019ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application\u2019s needs.\nuseState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own\nHow to reuse logic between components\nHow to name and structure your custom Hooks\nWhen and why to extract custom Hooks\nCustom Hooks: Sharing logic between components",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When and why to extract custom Hooks\nCustom Hooks: Sharing logic between components\nImagine you\u2019re developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you\u2019ll need two things in your component:\nA piece of state that tracks whether the network is online.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A piece of state that tracks whether the network is online.\nAn Effect that subscribes to the global online and offline events, and updates that state.\nonline\noffline\nThis will keep your component synchronized with the network status. You might start with something like this:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\nTry turning your network on and off, and notice how this StatusBar updates in response to your actions.\nStatusBar\nNow imagine you also want to use the same logic in a different component. You want to implement a Save button that will become disabled and show \u201cReconnecting\u2026\u201d instead of \u201cSave\u201d while the network is off.\nTo start, you can copy and paste the isOnline state and the Effect into SaveButton:\nisOnline\nSaveButton",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "isOnline\nSaveButton\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function SaveButton() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n \n );\n}\nVerify that, if you turn off the network, the button will change its appearance.\nThese two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different visual appearance, you want to reuse the logic between them.\nExtracting your own custom Hook from a component",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting your own custom Hook from a component\nImagine for a moment that, similar to useState and useEffect, there was a built-in useOnlineStatus Hook. Then both of these components could be simplified and you could remove the duplication between them:\nuseState\nuseEffect\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseEffect\nuseOnlineStatus\nfunction StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although there is no such built-in Hook, you can write it yourself. Declare a function called useOnlineStatus and move all the duplicated code into it from the components you wrote earlier:\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "At the end of the function, return isOnline. This lets your components read that value:\nisOnline\nimport { useOnlineStatus } from './useOnlineStatus.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() {\n const isOnline = useOnlineStatus();\n return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n\n function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }\n\n return (\n \n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n return (\n <>\n
Good morning, {firstName} {lastName}.
\n \n );\n}\nThere\u2019s some repetitive logic for each form field:\nThere\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "There\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName\nThere\u2019s a change handler (handleFirstNameChange and handleLastNameChange).\nhandleFirstNameChange\nhandleLastNameChange\nThere\u2019s a piece of JSX that specifies the value and onChange attributes for that input.\nvalue\nonChange\nYou can extract the repetitive logic into this useFormInput custom Hook:\nuseFormInput\nimport { useState } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useFormInput(initialValue) {\n const [value, setValue] = useState(initialValue);\n\n function handleChange(e) {\n setValue(e.target.value);\n }\n\n const inputProps = {\n value: value,\n onChange: handleChange\n };",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return inputProps;\n}\nNotice that it only declares one state variable called value.\nvalue\nHowever, the Form component calls useFormInput two times:\nForm\nuseFormInput\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nThis is why it works like declaring two separate state variables!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This is why it works like declaring two separate state variables!\nCustom Hooks let you share stateful logic but not state itself. Each call to a Hook is completely independent from every other call to the same Hook. This is why the two sandboxes above are completely equivalent. If you\u2019d like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When you need to share the state itself between multiple components, lift it up and pass it down instead.\nPassing reactive values between Hooks\nThe code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks need to be pure. Think of custom Hooks\u2019 code as part of your component\u2019s body!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room:\nimport { useState, useEffect } from 'react';\nimport { createConnection } from './chat.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useEffect(() => {\n const options = {\n serverUrl: serverUrl,\n roomId: roomId\n };\n const connection = createConnection(options);\n connection.on('message', (msg) => {\n showNotification('New message: ' + msg);\n });\n connection.connect();\n return () => connection.disconnect();\n }, [roomId, serverUrl]);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nWhen you change serverUrl or roomId, the Effect \u201creacts\u201d to your changes and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect\u2019s dependencies.\nserverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "serverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nThis lets your ChatRoom component call your custom Hook without worrying about how it works inside:\nChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}\nThis looks much simpler! (But it does the same thing.)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This looks much simpler! (But it does the same thing.)\nNotice that the logic still responds to prop and state changes. Try editing the server URL or the selected room:\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you\u2019re taking the return value of one Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...\nand passing it as an input to another Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Every time your ChatRoom component re-renders, it passes the latest roomId and serverUrl to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with audio or video processing software, chaining Hooks like this might remind you of chaining visual or audio effects. It\u2019s as if the output of useState \u201cfeeds into\u201d the input of the useChatRoom.)\nChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom\nPassing event handlers to custom Hooks\nUnder Construction\nThis section describes an experimental API that has not yet been released in a stable version of React.\nAs you start using useChatRoom in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nLet\u2019s say you want to move this logic back to your component:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s say you want to move this logic back to your component:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...\nTo make this work, change your custom Hook to take onReceiveMessage as one of its named options:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onReceiveMessage\nexport function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This will work, but there\u2019s one more improvement you can do when your custom Hook accepts event handlers.\nAdding a dependency on onReceiveMessage is not ideal because it will cause the chat to re-connect every time the component re-renders. Wrap this event handler into an Effect Event to remove it from the dependencies:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Now the chat won\u2019t re-connect every time that the ChatRoom component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:\nChatRoom\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl,\n onReceiveMessage(msg) {\n showNotification('New message: ' + msg);\n }\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you no longer need to know how useChatRoom works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That\u2019s the power of custom Hooks.\nuseChatRoom\nWhen to use custom Hooks",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nWhen to use custom Hooks\nYou don\u2019t need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a useFormInput Hook to wrap a single useState call like earlier is probably unnecessary.\nuseFormInput\nuseState",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useFormInput\nuseState\nHowever, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. You shouldn\u2019t need Effects very often, so if you\u2019re writing one, it means that you need to \u201cstep outside React\u201d to synchronize with some external system or to do something that React doesn\u2019t have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "For example, consider a ShippingForm component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although this code is quite repetitive, it\u2019s correct to keep these Effects separate from each other. They synchronize two different things, so you shouldn\u2019t merge them into one Effect. Instead, you can simplify the ShippingForm component above by extracting the common logic between them into your own useData Hook:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}\nNow you can replace both Effects in the ShippingForm components with calls to useData:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting a custom Hook makes the data flow explicit. You feed the url in and you get the data out. By \u201chiding\u201d your Effect inside useData, you also prevent someone working on the ShippingForm component from adding unnecessary dependencies to it. With time, most of your app\u2019s Effects will be in custom Hooks.\nurl\ndata\nuseData\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "url\ndata\nuseData\nShippingForm\nStart by choosing your custom Hook\u2019s name. If you struggle to pick a clear name, it might mean that your Effect is too coupled to the rest of your component\u2019s logic, and is not yet ready to be extracted.\nIdeally, your custom Hook\u2019s name should be clear enough that even a person who doesn\u2019t write code often could have a good guess about what your custom Hook does, what it takes, and what it returns:\n\u2705 useData(url)\nuseData(url)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "\u2705 useData(url)\nuseData(url)\n\u2705 useImpressionLog(eventName, extraData)\nuseImpressionLog(eventName, extraData)\n\u2705 useChatRoom(options)\nuseChatRoom(options)\nWhen you synchronize with an external system, your custom Hook name may be more technical and use jargon specific to that system. It\u2019s good as long as it would be clear to a person familiar with that system:\n\u2705 useMediaQuery(query)\nuseMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)\nuseIntersectionObserver(ref, options)\nKeep custom Hooks focused on concrete high-level use cases. Avoid creating and using custom \u201clifecycle\u201d Hooks that act as alternatives and convenience wrappers for the useEffect API itself:\nuseEffect\n\ud83d\udd34 useMount(fn)\nuseMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)\nFor example, this useMount Hook tries to ensure some code only runs \u201con mount\u201d:\nuseMount",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom \u201clifecycle\u201d Hooks like useMount don\u2019t fit well into the React paradigm. For example, this code example has a mistake (it doesn\u2019t \u201creact\u201d to roomId or serverUrl changes), but the linter won\u2019t warn you about it because the linter only checks direct useEffect calls. It won\u2019t know about your Hook.\nuseMount\nroomId\nserverUrl\nuseEffect\nIf you\u2019re writing an Effect, start by using the React API directly:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Then, you can (but don\u2019t have to) extract custom Hooks for different high-level use cases:\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A good custom Hook makes the calling code more declarative by constraining what it does. For example, useChatRoom(options) can only connect to the chat room, while useImpressionLog(eventName, extraData) can only send an impression log to the analytics. If your custom Hook API doesn\u2019t constrain the use cases and is very abstract, in the long run it\u2019s likely to introduce more problems than it solves.\nuseChatRoom(options)\nuseImpressionLog(eventName, extraData)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom(options)\nuseImpressionLog(eventName, extraData)\nCustom Hooks help you migrate to better patterns",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom Hooks help you migrate to better patterns\nEffects are an \u201cescape hatch\u201d: you use them when you need to \u201cstep outside React\u201d and when there is no better built-in solution for your use case. With time, the React team\u2019s goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping your Effects in custom Hooks makes it easier to upgrade your code when these solutions become available.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s return to this example:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "window.removeEventListener('offline', handleOffline);\n };\n }, []);\n return isOnline;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "In the above example, useOnlineStatus is implemented with a pair of useState and useEffect. However, this isn\u2019t the best possible solution. There is a number of edge cases it doesn\u2019t consider. For example, it assumes that when the component mounts, isOnline is already true, but this may be wrong if the network already went offline. You can use the browser navigator.onLine API to check for that, but using it directly would not work on the server for generating the initial HTML. In short, this",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "but using it directly would not work on the server for generating the initial HTML. In short, this code could be improved.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useOnlineStatus\nuseState\nuseEffect\nisOnline\ntrue\nnavigator.onLine\nReact includes a dedicated API called useSyncExternalStore which takes care of all of these problems for you. Here is your useOnlineStatus Hook, rewritten to take advantage of this new API:\nuseSyncExternalStore\nuseOnlineStatus\nimport { useSyncExternalStore } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function subscribe(callback) {\n window.addEventListener('online', callback);\n window.addEventListener('offline', callback);\n return () => {\n window.removeEventListener('online', callback);\n window.removeEventListener('offline', callback);\n };\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n return useSyncExternalStore(\n subscribe,\n () => navigator.onLine, // How to get the value on the client\n () => true // How to get the value on the server\n );\n}\nNotice how you didn\u2019t need to change any of the components to make this migration:\nfunction StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}\nThis is another reason for why wrapping Effects in custom Hooks is often beneficial:\nYou make the data flow to and from your Effects very explicit.\nYou let your components focus on the intent rather than on the exact implementation of your Effects.\nWhen React adds new features, you can remove those Effects without changing any of your components.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When React adds new features, you can remove those Effects without changing any of your components.\nSimilar to a design system, you might find it helpful to start extracting common idioms from your app\u2019s components into custom Hooks. This will keep your components\u2019 code focused on the intent, and let you avoid writing raw Effects very often. Many excellent custom Hooks are maintained by the React community.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "We\u2019re still working out the details, but we expect that in the future, you\u2019ll write data fetching like this:\nimport { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "If you use custom Hooks like useData above in your app, it will require fewer changes to migrate to the eventually recommended approach than if you write raw Effects in every component manually. However, the old approach will still work fine, so if you feel happy writing raw Effects, you can continue to do that.\nuseData\nThere is more than one way to do it",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useData\nThere is more than one way to do it\nLet\u2019s say you want to implement a fade-in animation from scratch using the browser requestAnimationFrame API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you hold in a ref until it reaches 1. Your code might start like this:\nrequestAnimationFrame\n1\nimport { useState, useEffect, useRef } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function Welcome() {\n const ref = useRef(null);\n\n useEffect(() => {\n const duration = 1000;\n const node = ref.current;\n\n let startTime = performance.now();\n let frameId = null;\n\n function onFrame(now) {\n const timePassed = now - startTime;\n const progress = Math.min(timePassed / duration, 1);\n onProgress(progress);\n if (progress < 1) {\n // We still have more frames to paint\n frameId = requestAnimationFrame(onFrame);\n }\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function onProgress(progress) {\n node.style.opacity = progress;\n }\n\n function start() {\n onProgress(0);\n startTime = performance.now();\n frameId = requestAnimationFrame(onFrame);\n }\n\n function stop() {\n cancelAnimationFrame(frameId);\n startTime = null;\n frameId = null;\n }\n\n start();\n return () => stop();\n }, []);\n\n return (\n \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && Seconds passed: {count}
;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() { const count = useCounter(); return Seconds passed: {count}
;}\nYou\u2019ll need to write your custom Hook in useCounter.js and import it into the App.js file.\nuseCounter.js\nApp.js\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(c => c + 1);\n }, 1000);\n return () => clearInterval(id);\n }, []);\n return Seconds passed: {count}
;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Thinking in React\nReact can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we\u2019ll guide you through the thought process of building a searchable product data table with React.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Start with the mockup\nImagine that you already have a JSON API and a mockup from a designer.\nThe JSON API returns some data that looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The JSON API returns some data that looks like this:\n[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]\nThe mockup looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The mockup looks like this:\nTo implement a UI in React, you will usually follow the same five steps.\nStep 1: Break the UI into a component hierarchy\nStart by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them!\nDepending on your background, you can think about splitting up a design into components in different ways:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Programming\u2014use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.\nCSS\u2014consider what you would make class selectors for. (However, components are a bit less granular.)\nDesign\u2014consider how you would organize the design\u2019s layers.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Design\u2014consider how you would organize the design\u2019s layers.\nIf your JSON is well-structured, you\u2019ll often find that it naturally maps to the component structure of your UI. That\u2019s because UI and data models often have the same information architecture\u2014that is, the same shape. Separate your UI into components, where each component matches one piece of your data model.\nThere are five components on this screen:\nFilterableProductTable (grey) contains the entire app.\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "FilterableProductTable (grey) contains the entire app.\nFilterableProductTable\nSearchBar (blue) receives the user input.\nSearchBar\nProductTable (lavender) displays and filters the list according to the user input.\nProductTable\nProductCategoryRow (green) displays a heading for each category.\nProductCategoryRow\nProductRow\t(yellow) displays a row for each product.\nProductRow",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\t(yellow) displays a row for each product.\nProductRow\nIf you look at ProductTable (lavender), you\u2019ll see that the table header (containing the \u201cName\u201d and \u201cPrice\u201d labels) isn\u2019t its own component. This is a matter of preference, and you could go either way. For this example, it is a part of ProductTable because it appears inside the ProductTable\u2019s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own ProductTableHeader component.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductTable\nProductTable\nProductTable\nProductTableHeader\nNow that you\u2019ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "SearchBar\nProductTable\n\nProductCategoryRow\nProductRow\nFilterableProductTable\nSearchBar\nSearchBar\nProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductCategoryRow\nProductRow\nProductTable\nProductCategoryRow\nProductCategoryRow\nProductRow\nProductRow\nStep 2: Build a static version in React",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\nStep 2: Build a static version in React\nNow that you have your component hierarchy, it\u2019s time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity\u2026 yet! It\u2019s often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "To build a static version of your app that renders your data model, you\u2019ll want to build components that reuse other components and pass data using props. Props are a way of passing data from parent to child. (If you\u2019re familiar with the concept of state, don\u2019t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don\u2019t need it.)",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "You can either build \u201ctop down\u201d by starting with building the components higher up in the hierarchy (like FilterableProductTable) or \u201cbottom up\u201d by working from components lower down (like ProductRow). In simpler examples, it\u2019s usually easier to go top-down, and on larger projects, it\u2019s easier to go bottom-up.\nFilterableProductTable\nProductRow\nfunction ProductCategoryRow({ category }) {\n return (\n \n \n {category}\n \n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;\n\n products.forEach((product) => {\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}\n\nfunction SearchBar() {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function FilterableProductTable({ products }) {\n return (\n \n \n \n {category}\n \n \n );\n}\n\nfunction ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products, filterText, inStockOnly }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "products.forEach((product) => {\n if (\n product.name.toLowerCase().indexOf(\n filterText.toLowerCase()\n ) === -1\n ) {\n return;\n }\n if (inStockOnly && !product.stocked) {\n return;\n }\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function SearchBar({ filterText, inStockOnly }) {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "const PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "export default function App() {\n return \n {walk ? 'Walk' : 'Stop'}\n
\n \n );\n}\nAdd an alert to the click handler. When the light is green and says \u201cWalk\u201d, clicking the button should say \u201cStop is next\u201d. When the light is red and says \u201cStop\u201d, clicking the button should say \u201cWalk is next\u201d.\nalert",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "alert\nDoes it make a difference whether you put the alert before or after the setWalk call?\nalert\nsetWalk",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "Sharing State Between Components\nSometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as lifting state up, and it\u2019s one of the most common things you will do writing React code.\nYou will learn\nHow to share state between components by lifting it up\nWhat are controlled and uncontrolled components\nLifting state up by example",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "What are controlled and uncontrolled components\nLifting state up by example\nIn this example, a parent Accordion component renders two separate Panels:\nAccordion\nPanel\nAccordion",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nEach Panel component has a boolean isActive state that determines whether its content is visible.\nPanel\nisActive\nPress the Show button for both panels:\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children }) {\n const [isActive, setIsActive] = useState(false);\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "\n \n );\n}\nNotice how pressing one panel\u2019s button does not affect the other panel\u2014they are independent.\nInitially, each Panel\u2019s isActive state is false, so they both appear collapsed\nPanel\nisActive\nfalse\nClicking either Panel\u2019s button will only update that Panel\u2019s isActive state alone\nPanel\nPanel\nisActive",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nisActive\nBut now let\u2019s say you want to change it so that only one panel is expanded at any given time. With that design, expanding the second panel should collapse the first one. How would you do that?\nTo coordinate these two panels, you need to \u201clift their state up\u201d to a parent component in three steps:\nRemove state from the child components.\nPass hardcoded data from the common parent.\nAdd state to the common parent and pass it down together with the event handlers.",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Add state to the common parent and pass it down together with the event handlers.\nThis will allow the Accordion component to coordinate both Panels and only expand one at a time.\nAccordion\nPanel\nStep 1: Remove state from the child components\nYou will give control of the Panel\u2019s isActive to its parent component. This means that the parent component will pass isActive to Panel as a prop instead. Start by removing this line from the Panel component:\nPanel\nisActive\nisActive\nPanel\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nisActive\nPanel\nPanel\nconst [isActive, setIsActive] = useState(false);\nconst [isActive, setIsActive] = useState(false);\nAnd instead, add isActive to the Panel\u2019s list of props:\nisActive\nPanel\nfunction Panel({ title, children, isActive }) {\nfunction Panel({ title, children, isActive }) {\nNow the Panel\u2019s parent component can control isActive by passing it down as a prop. Conversely, the Panel component now has no control over the value of isActive\u2014it\u2019s now up to the parent component!",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nPanel\nisActive\nStep 2: Pass hardcoded data from the common parent\nTo lift state up, you must locate the closest common parent component of both of the child components that you want to coordinate:\nAccordion (closest common parent)",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nIn this example, it\u2019s the Accordion component. Since it\u2019s above both panels and can control their props, it will become the \u201csource of truth\u201d for which panel is currently active. Make the Accordion component pass a hardcoded value of isActive (for example, true) to both panels:\nAccordion\nAccordion\nisActive\ntrue\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children, isActive }) {\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}\nTry editing the hardcoded isActive values in the Accordion component and see the result on the screen.\nisActive\nAccordion\nStep 3: Add state to the common parent",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "isActive\nAccordion\nStep 3: Add state to the common parent\nLifting state up often changes the nature of what you\u2019re storing as state.\nIn this case, only one panel should be active at a time. This means that the Accordion common parent component needs to keep track of which panel is the active one. Instead of a boolean value, it could use a number as the index of the active Panel for the state variable:\nAccordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Accordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);\nconst [activeIndex, setActiveIndex] = useState(0);\nWhen the activeIndex is 0, the first panel is active, and when it\u2019s 1, it\u2019s the second one.\nactiveIndex\n0\n1",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "activeIndex\n0\n1\nClicking the \u201cShow\u201d button in either Panel needs to change the active index in Accordion. A Panel can\u2019t set the activeIndex state directly because it\u2019s defined inside the Accordion. The Accordion component needs to explicitly allow the Panel component to change its state by passing an event handler down as a prop:\nPanel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel\n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... \n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "The
\n",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "\n\n\nReact lets you combine your markup, CSS, and JavaScript into custom \u201ccomponents\u201d, reusable UI elements for your app. The table of contents code you saw above could be turned into a , , etc.\n\n",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "\n\nJust like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you\u2019re reading is made out of React components:\n ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ![]()
tag with src and alt attributes. ![]()
is written like HTML, but it is actually JavaScript under the hood! This syntax is called JSX, and it lets you embed markup inside JavaScript.\n![]()
\nsrc\nalt\n![]()
\nReturn statements can be written all on one line, as in this component:\nreturn ;\nreturn ;",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "return ;\nBut if your markup isn\u2019t all on the same line as the return keyword, you must wrap it in a pair of parentheses:\nreturn\nreturn ( );\nreturn ( );\nPitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Pitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn\nUsing a component\nNow that you\u2019ve defined your Profile component, you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:\nProfile\nGallery\nProfile\nfunction Profile() {\n return (\n \n Amazing scientists
\n \n );\n}\nWhat the browser sees\nNotice the difference in casing:\n is lowercase, so React knows we refer to an HTML tag.\n\n![]()
. In the end, this is what the browser sees:\nProfile\n![]()
\n Amazing scientists
",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " Amazing scientists
\nNesting and organizing components",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Nesting and organizing components\nComponents are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move Profile to a separate file. You will learn how to do this shortly on the page about imports.\nProfile",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nBecause the Profile components are rendered inside Gallery\u2014even several times!\u2014we can say that Gallery is a parent component, rendering each Profile as a \u201cchild\u201d. This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.\nProfile\nGallery\nGallery\nProfile\nPitfall\nComponents can render other components, but you must never nest their definitions:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nPitfall\nComponents can render other components, but you must never nest their definitions:\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nThe snippet above is very slow and causes bugs. Instead, define every component at the top level:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "The snippet above is very slow and causes bugs. Instead, define every component at the top level:\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nWhen a child component needs some data from a parent, pass it by props instead of nesting definitions.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Your React application begins at a \u201croot\u201d component. Usually, it is created automatically when you start a new project. For example, if you use CodeSandbox or if you use the framework Next.js, the root component is defined in pages/index.js. In these examples, you\u2019ve been exporting root components.\npages/index.js",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "pages/index.js\nMost React apps use components all the way down. This means that you won\u2019t only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "React-based frameworks take this a step further. Instead of using an empty HTML file and letting React \u201ctake over\u201d managing the page with JavaScript, they also generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Still, many websites only use React to add interactivity to existing HTML pages. They have many root components instead of a single one for the entire page. You can use as much\u2014or as little\u2014React as you need.\nRecap\nYou\u2019ve just gotten your first taste of React! Let\u2019s recap some key points.\nReact lets you create components, reusable UI elements for your app.\nReact lets you create components, reusable UI elements for your app.\nIn a React app, every piece of UI is a component.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "In a React app, every piece of UI is a component.\nIn a React app, every piece of UI is a component.\nReact components are regular JavaScript functions except:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Their names always begin with a capital letter.\nThey return JSX markup.\nReact components are regular JavaScript functions except:\nTheir names always begin with a capital letter.\nThey return JSX markup.\nTry out some challenges\nThis sandbox doesn\u2019t work because the root component is not exported:\nfunction Profile() {\n return (\n Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\nAnd you want to put it into your component:\nexport default function TodoList() { return ( // ??? )}\nexport default function TodoList() { return ( // ??? )}\nIf you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (\n // This doesn't quite work!\n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights\n
- Rehearse a movie scene\n
- Improve the spectrum technology\n
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "- Rehearse a movie scene\n
- Improve the spectrum technology\n \nThis is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they\u2019ll guide you to fix the markup, or you can follow the guide below.\nNote\nMost of the time, React\u2019s on-screen error messages will help you find where the problem is. Give them a read if you get stuck!\nThe Rules of JSX\n1. Return a single root element",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "The Rules of JSX\n1. Return a single root element\nTo return multiple elements from a component, wrap them with a single parent tag.\nFor example, you can use a :\n\n
Hedy Lamarr's Todos
...
\n Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you don\u2019t want to add an extra to your markup, you can write <> and instead:\n\n<>\n\n<> Hedy Lamarr's Todos
...
\n<> Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "This empty tag is called a Fragment. Fragments let you group things without leaving any trace in the browser HTML tree.\nJSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can\u2019t return two objects from a function without wrapping them into an array. This explains why you also can\u2019t return two JSX tags without wrapping them into another tag or a Fragment.\n2. Close all the tags",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "2. Close all the tags\nJSX requires tags to be explicitly closed: self-closing tags like ![]()
must become ![]()
, and wrapping tags like - oranges must be written as
- oranges
.\n![]()
\n![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:\n<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\n3. camelCase all most of the things!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "3. camelCase all most of the things!\nJSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can\u2019t contain dashes or be reserved words like class.\nclass",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "class\nThis is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of stroke-width you use strokeWidth. Since class is a reserved word, in React you write className instead, named after the corresponding DOM property:\nstroke-width\nstrokeWidth\nclass\nclassName\n\n",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "\nYou can find all these attributes in the list of DOM component props. If you get one wrong, don\u2019t worry\u2014React will print a message with a possible correction to the browser console.\nPitfall\nFor historical reasons, aria-* and data-* attributes are written as in HTML with dashes.\naria-*\ndata-*\nPro-tip: Use a JSX Converter",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "aria-*\ndata-*\nPro-tip: Use a JSX Converter\nConverting all these attributes in existing markup can be tedious! We recommend using a converter to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it\u2019s still worth understanding what is going on so that you can comfortably write JSX on your own.\nHere is your final result:\nexport default function TodoList() {\n return (\n <>\n Hedy Lamarr's Todos
\n \n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights
\n - Rehearse a movie scene
\n - Improve the spectrum technology
\n
\n \n );\n}\nRecap\nNow you know why JSX exists and how to use it in components:\nReact components group rendering logic together with markup because they are related.",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "React components group rendering logic together with markup because they are related.\nJSX is similar to HTML, with a few differences. You can use a converter if you need to.\nError messages will often point you in the right direction to fixing your markup.\nTry out some challenges\nThis HTML was pasted into a component, but it\u2019s not valid JSX. Fix it:\nexport default function Bio() {\n return (\n \n Welcome to my website!
\n \n ",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "
\n Welcome to my website!
\n \n \n You can find my thoughts here.\n
\n And pictures of scientists!\n
\n );\n}\nWhether to do it by hand or using the converter is up to you!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Keeping Components Pure\nSome JavaScript functions are pure. Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow.\nYou will learn\nWhat purity is and how it helps you avoid bugs\nHow to keep components pure by keeping changes out of the render phase",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "How to keep components pure by keeping changes out of the render phase\nHow to use Strict Mode to find mistakes in your components\nPurity: Components as formulas\nIn computer science (and especially the world of functional programming), a pure function is a function with the following characteristics:\nIt minds its own business. It does not change any objects or variables that existed before it was called.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Same inputs, same output. Given the same inputs, a pure function should always return the same result.\nYou might already be familiar with one example of pure functions: formulas in math.\nConsider this math formula: y = 2x.\nIf x = 2 then y = 4. Always.\nIf x = 3 then y = 6. Always.\nIf x = 3, y won\u2019t sometimes be 9 or \u20131 or 2.5 depending on the time of day or the state of the stock market.\nIf y = 2x and x = 3, y will always be 6.\nIf we made this into a JavaScript function, it would look like this:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "If we made this into a JavaScript function, it would look like this:\nfunction double(number) { return 2 * number;}\nfunction double(number) { return 2 * number;}\nIn the above example, double is a pure function. If you pass it 3, it will return 6. Always.\ndouble\n3\n6\nReact is designed around this concept. React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Recipe({ drinkers }) {\n return (\n \n - Boil {drinkers} cups of water.
\n - Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.
\n - Add {0.5 * drinkers} cups of milk to boil and sugar to taste.
\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function App() {\n return (\n \n Spiced Chai Recipe
\n For two
\n For a gathering
\n \n );\n}\nWhen you pass drinkers={2} to Recipe, it will return JSX containing 2 cups of water. Always.\ndrinkers={2}\nRecipe\n2 cups of water\nIf you pass drinkers={4}, it will return JSX containing 4 cups of water. Always.\ndrinkers={4}\n4 cups of water\nJust like a math formula.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "drinkers={4}\n4 cups of water\nJust like a math formula.\nYou could think of your components as recipes: if you follow them and don\u2019t introduce new ingredients during the cooking process, you will get the same dish every time. That \u201cdish\u201d is the JSX that the component serves to React to render.\nIllustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Illustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences\nReact\u2019s rendering process must always be pure. Components should only return their JSX, and not change any objects or variables that existed before rendering\u2014that would make them impure!\nHere is a component that breaks this rule:\nlet guest = 0;",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Cup() {\n // Bad: changing a preexisting variable!\n guest = guest + 1;\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n . Some frameworks do this by default.\n\nLocal mutation: Your component\u2019s little secret",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "\nLocal mutation: Your component\u2019s little secret\nIn the above example, the problem was that the component changed a preexisting variable while rendering. This is often called a \u201cmutation\u201d to make it sound a bit scarier. Pure functions don\u2019t mutate variables outside of the function\u2019s scope or objects that were created before the call\u2014that makes them impure!",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "However, it\u2019s completely fine to change variables and objects that you\u2019ve just created while rendering. In this example, you create an [] array, assign it to a cups variable, and then push a dozen cups into it:\n[]\ncups\npush\nfunction Cup({ guest }) {\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaGathering() {\n const cups = [];\n for (let i = 1; i <= 12; i++) {\n cups.push(\u2019s CSS class to \"night\" during the time from midnight to six hours in the morning, and \"day\" at all other times. However, it doesn\u2019t work. Can you fix this component?\n\n\"night\"\n\"day\"\nYou can verify whether your solution works by temporarily changing the computer\u2019s timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!\nexport default function Clock({ time }) {",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function Clock({ time }) {\n const hours = time.getHours();\n if (hours >= 0 && hours <= 6) {\n document.getElementById('time').className = 'night';\n } else {\n document.getElementById('time').className = 'day';\n }\n return (\n \n {time.toLocaleTimeString()}\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Reusing Logic with Custom Hooks\nReact comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you\u2019ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application\u2019s needs.\nuseState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own\nHow to reuse logic between components\nHow to name and structure your custom Hooks\nWhen and why to extract custom Hooks\nCustom Hooks: Sharing logic between components",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When and why to extract custom Hooks\nCustom Hooks: Sharing logic between components\nImagine you\u2019re developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you\u2019ll need two things in your component:\nA piece of state that tracks whether the network is online.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A piece of state that tracks whether the network is online.\nAn Effect that subscribes to the global online and offline events, and updates that state.\nonline\noffline\nThis will keep your component synchronized with the network status. You might start with something like this:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\nTry turning your network on and off, and notice how this StatusBar updates in response to your actions.\nStatusBar\nNow imagine you also want to use the same logic in a different component. You want to implement a Save button that will become disabled and show \u201cReconnecting\u2026\u201d instead of \u201cSave\u201d while the network is off.\nTo start, you can copy and paste the isOnline state and the Effect into SaveButton:\nisOnline\nSaveButton",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "isOnline\nSaveButton\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function SaveButton() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n \n );\n}\nVerify that, if you turn off the network, the button will change its appearance.\nThese two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different visual appearance, you want to reuse the logic between them.\nExtracting your own custom Hook from a component",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting your own custom Hook from a component\nImagine for a moment that, similar to useState and useEffect, there was a built-in useOnlineStatus Hook. Then both of these components could be simplified and you could remove the duplication between them:\nuseState\nuseEffect\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseEffect\nuseOnlineStatus\nfunction StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although there is no such built-in Hook, you can write it yourself. Declare a function called useOnlineStatus and move all the duplicated code into it from the components you wrote earlier:\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "At the end of the function, return isOnline. This lets your components read that value:\nisOnline\nimport { useOnlineStatus } from './useOnlineStatus.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() {\n const isOnline = useOnlineStatus();\n return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n\n function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }\n\n return (\n \n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n return (\n <>\n
Good morning, {firstName} {lastName}.
\n \n );\n}\nThere\u2019s some repetitive logic for each form field:\nThere\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "There\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName\nThere\u2019s a change handler (handleFirstNameChange and handleLastNameChange).\nhandleFirstNameChange\nhandleLastNameChange\nThere\u2019s a piece of JSX that specifies the value and onChange attributes for that input.\nvalue\nonChange\nYou can extract the repetitive logic into this useFormInput custom Hook:\nuseFormInput\nimport { useState } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useFormInput(initialValue) {\n const [value, setValue] = useState(initialValue);\n\n function handleChange(e) {\n setValue(e.target.value);\n }\n\n const inputProps = {\n value: value,\n onChange: handleChange\n };",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return inputProps;\n}\nNotice that it only declares one state variable called value.\nvalue\nHowever, the Form component calls useFormInput two times:\nForm\nuseFormInput\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nThis is why it works like declaring two separate state variables!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This is why it works like declaring two separate state variables!\nCustom Hooks let you share stateful logic but not state itself. Each call to a Hook is completely independent from every other call to the same Hook. This is why the two sandboxes above are completely equivalent. If you\u2019d like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When you need to share the state itself between multiple components, lift it up and pass it down instead.\nPassing reactive values between Hooks\nThe code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks need to be pure. Think of custom Hooks\u2019 code as part of your component\u2019s body!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room:\nimport { useState, useEffect } from 'react';\nimport { createConnection } from './chat.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useEffect(() => {\n const options = {\n serverUrl: serverUrl,\n roomId: roomId\n };\n const connection = createConnection(options);\n connection.on('message', (msg) => {\n showNotification('New message: ' + msg);\n });\n connection.connect();\n return () => connection.disconnect();\n }, [roomId, serverUrl]);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nWhen you change serverUrl or roomId, the Effect \u201creacts\u201d to your changes and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect\u2019s dependencies.\nserverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "serverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nThis lets your ChatRoom component call your custom Hook without worrying about how it works inside:\nChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}\nThis looks much simpler! (But it does the same thing.)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This looks much simpler! (But it does the same thing.)\nNotice that the logic still responds to prop and state changes. Try editing the server URL or the selected room:\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you\u2019re taking the return value of one Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...\nand passing it as an input to another Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Every time your ChatRoom component re-renders, it passes the latest roomId and serverUrl to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with audio or video processing software, chaining Hooks like this might remind you of chaining visual or audio effects. It\u2019s as if the output of useState \u201cfeeds into\u201d the input of the useChatRoom.)\nChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom\nPassing event handlers to custom Hooks\nUnder Construction\nThis section describes an experimental API that has not yet been released in a stable version of React.\nAs you start using useChatRoom in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nLet\u2019s say you want to move this logic back to your component:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s say you want to move this logic back to your component:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...\nTo make this work, change your custom Hook to take onReceiveMessage as one of its named options:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onReceiveMessage\nexport function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This will work, but there\u2019s one more improvement you can do when your custom Hook accepts event handlers.\nAdding a dependency on onReceiveMessage is not ideal because it will cause the chat to re-connect every time the component re-renders. Wrap this event handler into an Effect Event to remove it from the dependencies:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Now the chat won\u2019t re-connect every time that the ChatRoom component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:\nChatRoom\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl,\n onReceiveMessage(msg) {\n showNotification('New message: ' + msg);\n }\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you no longer need to know how useChatRoom works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That\u2019s the power of custom Hooks.\nuseChatRoom\nWhen to use custom Hooks",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nWhen to use custom Hooks\nYou don\u2019t need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a useFormInput Hook to wrap a single useState call like earlier is probably unnecessary.\nuseFormInput\nuseState",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useFormInput\nuseState\nHowever, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. You shouldn\u2019t need Effects very often, so if you\u2019re writing one, it means that you need to \u201cstep outside React\u201d to synchronize with some external system or to do something that React doesn\u2019t have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "For example, consider a ShippingForm component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although this code is quite repetitive, it\u2019s correct to keep these Effects separate from each other. They synchronize two different things, so you shouldn\u2019t merge them into one Effect. Instead, you can simplify the ShippingForm component above by extracting the common logic between them into your own useData Hook:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}\nNow you can replace both Effects in the ShippingForm components with calls to useData:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting a custom Hook makes the data flow explicit. You feed the url in and you get the data out. By \u201chiding\u201d your Effect inside useData, you also prevent someone working on the ShippingForm component from adding unnecessary dependencies to it. With time, most of your app\u2019s Effects will be in custom Hooks.\nurl\ndata\nuseData\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "url\ndata\nuseData\nShippingForm\nStart by choosing your custom Hook\u2019s name. If you struggle to pick a clear name, it might mean that your Effect is too coupled to the rest of your component\u2019s logic, and is not yet ready to be extracted.\nIdeally, your custom Hook\u2019s name should be clear enough that even a person who doesn\u2019t write code often could have a good guess about what your custom Hook does, what it takes, and what it returns:\n\u2705 useData(url)\nuseData(url)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "\u2705 useData(url)\nuseData(url)\n\u2705 useImpressionLog(eventName, extraData)\nuseImpressionLog(eventName, extraData)\n\u2705 useChatRoom(options)\nuseChatRoom(options)\nWhen you synchronize with an external system, your custom Hook name may be more technical and use jargon specific to that system. It\u2019s good as long as it would be clear to a person familiar with that system:\n\u2705 useMediaQuery(query)\nuseMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)\nuseIntersectionObserver(ref, options)\nKeep custom Hooks focused on concrete high-level use cases. Avoid creating and using custom \u201clifecycle\u201d Hooks that act as alternatives and convenience wrappers for the useEffect API itself:\nuseEffect\n\ud83d\udd34 useMount(fn)\nuseMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)\nFor example, this useMount Hook tries to ensure some code only runs \u201con mount\u201d:\nuseMount",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom \u201clifecycle\u201d Hooks like useMount don\u2019t fit well into the React paradigm. For example, this code example has a mistake (it doesn\u2019t \u201creact\u201d to roomId or serverUrl changes), but the linter won\u2019t warn you about it because the linter only checks direct useEffect calls. It won\u2019t know about your Hook.\nuseMount\nroomId\nserverUrl\nuseEffect\nIf you\u2019re writing an Effect, start by using the React API directly:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Then, you can (but don\u2019t have to) extract custom Hooks for different high-level use cases:\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A good custom Hook makes the calling code more declarative by constraining what it does. For example, useChatRoom(options) can only connect to the chat room, while useImpressionLog(eventName, extraData) can only send an impression log to the analytics. If your custom Hook API doesn\u2019t constrain the use cases and is very abstract, in the long run it\u2019s likely to introduce more problems than it solves.\nuseChatRoom(options)\nuseImpressionLog(eventName, extraData)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom(options)\nuseImpressionLog(eventName, extraData)\nCustom Hooks help you migrate to better patterns",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom Hooks help you migrate to better patterns\nEffects are an \u201cescape hatch\u201d: you use them when you need to \u201cstep outside React\u201d and when there is no better built-in solution for your use case. With time, the React team\u2019s goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping your Effects in custom Hooks makes it easier to upgrade your code when these solutions become available.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s return to this example:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "window.removeEventListener('offline', handleOffline);\n };\n }, []);\n return isOnline;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "In the above example, useOnlineStatus is implemented with a pair of useState and useEffect. However, this isn\u2019t the best possible solution. There is a number of edge cases it doesn\u2019t consider. For example, it assumes that when the component mounts, isOnline is already true, but this may be wrong if the network already went offline. You can use the browser navigator.onLine API to check for that, but using it directly would not work on the server for generating the initial HTML. In short, this",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "but using it directly would not work on the server for generating the initial HTML. In short, this code could be improved.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useOnlineStatus\nuseState\nuseEffect\nisOnline\ntrue\nnavigator.onLine\nReact includes a dedicated API called useSyncExternalStore which takes care of all of these problems for you. Here is your useOnlineStatus Hook, rewritten to take advantage of this new API:\nuseSyncExternalStore\nuseOnlineStatus\nimport { useSyncExternalStore } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function subscribe(callback) {\n window.addEventListener('online', callback);\n window.addEventListener('offline', callback);\n return () => {\n window.removeEventListener('online', callback);\n window.removeEventListener('offline', callback);\n };\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n return useSyncExternalStore(\n subscribe,\n () => navigator.onLine, // How to get the value on the client\n () => true // How to get the value on the server\n );\n}\nNotice how you didn\u2019t need to change any of the components to make this migration:\nfunction StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}\nThis is another reason for why wrapping Effects in custom Hooks is often beneficial:\nYou make the data flow to and from your Effects very explicit.\nYou let your components focus on the intent rather than on the exact implementation of your Effects.\nWhen React adds new features, you can remove those Effects without changing any of your components.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When React adds new features, you can remove those Effects without changing any of your components.\nSimilar to a design system, you might find it helpful to start extracting common idioms from your app\u2019s components into custom Hooks. This will keep your components\u2019 code focused on the intent, and let you avoid writing raw Effects very often. Many excellent custom Hooks are maintained by the React community.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "We\u2019re still working out the details, but we expect that in the future, you\u2019ll write data fetching like this:\nimport { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "If you use custom Hooks like useData above in your app, it will require fewer changes to migrate to the eventually recommended approach than if you write raw Effects in every component manually. However, the old approach will still work fine, so if you feel happy writing raw Effects, you can continue to do that.\nuseData\nThere is more than one way to do it",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useData\nThere is more than one way to do it\nLet\u2019s say you want to implement a fade-in animation from scratch using the browser requestAnimationFrame API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you hold in a ref until it reaches 1. Your code might start like this:\nrequestAnimationFrame\n1\nimport { useState, useEffect, useRef } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function Welcome() {\n const ref = useRef(null);\n\n useEffect(() => {\n const duration = 1000;\n const node = ref.current;\n\n let startTime = performance.now();\n let frameId = null;\n\n function onFrame(now) {\n const timePassed = now - startTime;\n const progress = Math.min(timePassed / duration, 1);\n onProgress(progress);\n if (progress < 1) {\n // We still have more frames to paint\n frameId = requestAnimationFrame(onFrame);\n }\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function onProgress(progress) {\n node.style.opacity = progress;\n }\n\n function start() {\n onProgress(0);\n startTime = performance.now();\n frameId = requestAnimationFrame(onFrame);\n }\n\n function stop() {\n cancelAnimationFrame(frameId);\n startTime = null;\n frameId = null;\n }\n\n start();\n return () => stop();\n }, []);\n\n return (\n \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && Seconds passed: {count}
;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() { const count = useCounter(); return Seconds passed: {count}
;}\nYou\u2019ll need to write your custom Hook in useCounter.js and import it into the App.js file.\nuseCounter.js\nApp.js\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(c => c + 1);\n }, 1000);\n return () => clearInterval(id);\n }, []);\n return Seconds passed: {count}
;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Thinking in React\nReact can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we\u2019ll guide you through the thought process of building a searchable product data table with React.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Start with the mockup\nImagine that you already have a JSON API and a mockup from a designer.\nThe JSON API returns some data that looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The JSON API returns some data that looks like this:\n[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]\nThe mockup looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The mockup looks like this:\nTo implement a UI in React, you will usually follow the same five steps.\nStep 1: Break the UI into a component hierarchy\nStart by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them!\nDepending on your background, you can think about splitting up a design into components in different ways:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Programming\u2014use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.\nCSS\u2014consider what you would make class selectors for. (However, components are a bit less granular.)\nDesign\u2014consider how you would organize the design\u2019s layers.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Design\u2014consider how you would organize the design\u2019s layers.\nIf your JSON is well-structured, you\u2019ll often find that it naturally maps to the component structure of your UI. That\u2019s because UI and data models often have the same information architecture\u2014that is, the same shape. Separate your UI into components, where each component matches one piece of your data model.\nThere are five components on this screen:\nFilterableProductTable (grey) contains the entire app.\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "FilterableProductTable (grey) contains the entire app.\nFilterableProductTable\nSearchBar (blue) receives the user input.\nSearchBar\nProductTable (lavender) displays and filters the list according to the user input.\nProductTable\nProductCategoryRow (green) displays a heading for each category.\nProductCategoryRow\nProductRow\t(yellow) displays a row for each product.\nProductRow",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\t(yellow) displays a row for each product.\nProductRow\nIf you look at ProductTable (lavender), you\u2019ll see that the table header (containing the \u201cName\u201d and \u201cPrice\u201d labels) isn\u2019t its own component. This is a matter of preference, and you could go either way. For this example, it is a part of ProductTable because it appears inside the ProductTable\u2019s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own ProductTableHeader component.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductTable\nProductTable\nProductTable\nProductTableHeader\nNow that you\u2019ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "SearchBar\nProductTable\n\nProductCategoryRow\nProductRow\nFilterableProductTable\nSearchBar\nSearchBar\nProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductCategoryRow\nProductRow\nProductTable\nProductCategoryRow\nProductCategoryRow\nProductRow\nProductRow\nStep 2: Build a static version in React",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\nStep 2: Build a static version in React\nNow that you have your component hierarchy, it\u2019s time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity\u2026 yet! It\u2019s often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "To build a static version of your app that renders your data model, you\u2019ll want to build components that reuse other components and pass data using props. Props are a way of passing data from parent to child. (If you\u2019re familiar with the concept of state, don\u2019t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don\u2019t need it.)",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "You can either build \u201ctop down\u201d by starting with building the components higher up in the hierarchy (like FilterableProductTable) or \u201cbottom up\u201d by working from components lower down (like ProductRow). In simpler examples, it\u2019s usually easier to go top-down, and on larger projects, it\u2019s easier to go bottom-up.\nFilterableProductTable\nProductRow\nfunction ProductCategoryRow({ category }) {\n return (\n \n \n {category}\n \n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;\n\n products.forEach((product) => {\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}\n\nfunction SearchBar() {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function FilterableProductTable({ products }) {\n return (\n \n \n \n {category}\n \n \n );\n}\n\nfunction ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products, filterText, inStockOnly }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "products.forEach((product) => {\n if (\n product.name.toLowerCase().indexOf(\n filterText.toLowerCase()\n ) === -1\n ) {\n return;\n }\n if (inStockOnly && !product.stocked) {\n return;\n }\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function SearchBar({ filterText, inStockOnly }) {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "const PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "export default function App() {\n return \n {walk ? 'Walk' : 'Stop'}\n
\n \n );\n}\nAdd an alert to the click handler. When the light is green and says \u201cWalk\u201d, clicking the button should say \u201cStop is next\u201d. When the light is red and says \u201cStop\u201d, clicking the button should say \u201cWalk is next\u201d.\nalert",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "alert\nDoes it make a difference whether you put the alert before or after the setWalk call?\nalert\nsetWalk",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "Sharing State Between Components\nSometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as lifting state up, and it\u2019s one of the most common things you will do writing React code.\nYou will learn\nHow to share state between components by lifting it up\nWhat are controlled and uncontrolled components\nLifting state up by example",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "What are controlled and uncontrolled components\nLifting state up by example\nIn this example, a parent Accordion component renders two separate Panels:\nAccordion\nPanel\nAccordion",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nEach Panel component has a boolean isActive state that determines whether its content is visible.\nPanel\nisActive\nPress the Show button for both panels:\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children }) {\n const [isActive, setIsActive] = useState(false);\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "\n \n );\n}\nNotice how pressing one panel\u2019s button does not affect the other panel\u2014they are independent.\nInitially, each Panel\u2019s isActive state is false, so they both appear collapsed\nPanel\nisActive\nfalse\nClicking either Panel\u2019s button will only update that Panel\u2019s isActive state alone\nPanel\nPanel\nisActive",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nisActive\nBut now let\u2019s say you want to change it so that only one panel is expanded at any given time. With that design, expanding the second panel should collapse the first one. How would you do that?\nTo coordinate these two panels, you need to \u201clift their state up\u201d to a parent component in three steps:\nRemove state from the child components.\nPass hardcoded data from the common parent.\nAdd state to the common parent and pass it down together with the event handlers.",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Add state to the common parent and pass it down together with the event handlers.\nThis will allow the Accordion component to coordinate both Panels and only expand one at a time.\nAccordion\nPanel\nStep 1: Remove state from the child components\nYou will give control of the Panel\u2019s isActive to its parent component. This means that the parent component will pass isActive to Panel as a prop instead. Start by removing this line from the Panel component:\nPanel\nisActive\nisActive\nPanel\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nisActive\nPanel\nPanel\nconst [isActive, setIsActive] = useState(false);\nconst [isActive, setIsActive] = useState(false);\nAnd instead, add isActive to the Panel\u2019s list of props:\nisActive\nPanel\nfunction Panel({ title, children, isActive }) {\nfunction Panel({ title, children, isActive }) {\nNow the Panel\u2019s parent component can control isActive by passing it down as a prop. Conversely, the Panel component now has no control over the value of isActive\u2014it\u2019s now up to the parent component!",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nPanel\nisActive\nStep 2: Pass hardcoded data from the common parent\nTo lift state up, you must locate the closest common parent component of both of the child components that you want to coordinate:\nAccordion (closest common parent)",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nIn this example, it\u2019s the Accordion component. Since it\u2019s above both panels and can control their props, it will become the \u201csource of truth\u201d for which panel is currently active. Make the Accordion component pass a hardcoded value of isActive (for example, true) to both panels:\nAccordion\nAccordion\nisActive\ntrue\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children, isActive }) {\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}\nTry editing the hardcoded isActive values in the Accordion component and see the result on the screen.\nisActive\nAccordion\nStep 3: Add state to the common parent",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "isActive\nAccordion\nStep 3: Add state to the common parent\nLifting state up often changes the nature of what you\u2019re storing as state.\nIn this case, only one panel should be active at a time. This means that the Accordion common parent component needs to keep track of which panel is the active one. Instead of a boolean value, it could use a number as the index of the active Panel for the state variable:\nAccordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Accordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);\nconst [activeIndex, setActiveIndex] = useState(0);\nWhen the activeIndex is 0, the first panel is active, and when it\u2019s 1, it\u2019s the second one.\nactiveIndex\n0\n1",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "activeIndex\n0\n1\nClicking the \u201cShow\u201d button in either Panel needs to change the active index in Accordion. A Panel can\u2019t set the activeIndex state directly because it\u2019s defined inside the Accordion. The Accordion component needs to explicitly allow the Panel component to change its state by passing an event handler down as a prop:\nPanel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel\n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... \n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "The
\n\nReact lets you combine your markup, CSS, and JavaScript into custom \u201ccomponents\u201d, reusable UI elements for your app. The table of contents code you saw above could be turned into a , , etc.\n\n",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "\n\nJust like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you\u2019re reading is made out of React components:\n ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ![]()
tag with src and alt attributes. ![]()
is written like HTML, but it is actually JavaScript under the hood! This syntax is called JSX, and it lets you embed markup inside JavaScript.\n![]()
\nsrc\nalt\n![]()
\nReturn statements can be written all on one line, as in this component:\nreturn ;\nreturn ;",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "return ;\nBut if your markup isn\u2019t all on the same line as the return keyword, you must wrap it in a pair of parentheses:\nreturn\nreturn ( );\nreturn ( );\nPitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Pitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn\nUsing a component\nNow that you\u2019ve defined your Profile component, you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:\nProfile\nGallery\nProfile\nfunction Profile() {\n return (\n \n Amazing scientists
\n \n );\n}\nWhat the browser sees\nNotice the difference in casing:\n is lowercase, so React knows we refer to an HTML tag.\n\n![]()
. In the end, this is what the browser sees:\nProfile\n![]()
\n Amazing scientists
",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " Amazing scientists
\nNesting and organizing components",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Nesting and organizing components\nComponents are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move Profile to a separate file. You will learn how to do this shortly on the page about imports.\nProfile",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nBecause the Profile components are rendered inside Gallery\u2014even several times!\u2014we can say that Gallery is a parent component, rendering each Profile as a \u201cchild\u201d. This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.\nProfile\nGallery\nGallery\nProfile\nPitfall\nComponents can render other components, but you must never nest their definitions:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nPitfall\nComponents can render other components, but you must never nest their definitions:\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nThe snippet above is very slow and causes bugs. Instead, define every component at the top level:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "The snippet above is very slow and causes bugs. Instead, define every component at the top level:\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nWhen a child component needs some data from a parent, pass it by props instead of nesting definitions.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Your React application begins at a \u201croot\u201d component. Usually, it is created automatically when you start a new project. For example, if you use CodeSandbox or if you use the framework Next.js, the root component is defined in pages/index.js. In these examples, you\u2019ve been exporting root components.\npages/index.js",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "pages/index.js\nMost React apps use components all the way down. This means that you won\u2019t only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "React-based frameworks take this a step further. Instead of using an empty HTML file and letting React \u201ctake over\u201d managing the page with JavaScript, they also generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Still, many websites only use React to add interactivity to existing HTML pages. They have many root components instead of a single one for the entire page. You can use as much\u2014or as little\u2014React as you need.\nRecap\nYou\u2019ve just gotten your first taste of React! Let\u2019s recap some key points.\nReact lets you create components, reusable UI elements for your app.\nReact lets you create components, reusable UI elements for your app.\nIn a React app, every piece of UI is a component.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "In a React app, every piece of UI is a component.\nIn a React app, every piece of UI is a component.\nReact components are regular JavaScript functions except:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Their names always begin with a capital letter.\nThey return JSX markup.\nReact components are regular JavaScript functions except:\nTheir names always begin with a capital letter.\nThey return JSX markup.\nTry out some challenges\nThis sandbox doesn\u2019t work because the root component is not exported:\nfunction Profile() {\n return (\n Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\nAnd you want to put it into your component:\nexport default function TodoList() { return ( // ??? )}\nexport default function TodoList() { return ( // ??? )}\nIf you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (\n // This doesn't quite work!\n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights\n
- Rehearse a movie scene\n
- Improve the spectrum technology\n
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "- Rehearse a movie scene\n
- Improve the spectrum technology\n \nThis is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they\u2019ll guide you to fix the markup, or you can follow the guide below.\nNote\nMost of the time, React\u2019s on-screen error messages will help you find where the problem is. Give them a read if you get stuck!\nThe Rules of JSX\n1. Return a single root element",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "The Rules of JSX\n1. Return a single root element\nTo return multiple elements from a component, wrap them with a single parent tag.\nFor example, you can use a :\n\n
Hedy Lamarr's Todos
...
\n Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you don\u2019t want to add an extra to your markup, you can write <> and instead:\n\n<>\n\n<> Hedy Lamarr's Todos
...
\n<> Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "This empty tag is called a Fragment. Fragments let you group things without leaving any trace in the browser HTML tree.\nJSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can\u2019t return two objects from a function without wrapping them into an array. This explains why you also can\u2019t return two JSX tags without wrapping them into another tag or a Fragment.\n2. Close all the tags",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "2. Close all the tags\nJSX requires tags to be explicitly closed: self-closing tags like ![]()
must become ![]()
, and wrapping tags like - oranges must be written as
- oranges
.\n![]()
\n![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:\n<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\n3. camelCase all most of the things!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "3. camelCase all most of the things!\nJSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can\u2019t contain dashes or be reserved words like class.\nclass",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "class\nThis is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of stroke-width you use strokeWidth. Since class is a reserved word, in React you write className instead, named after the corresponding DOM property:\nstroke-width\nstrokeWidth\nclass\nclassName\n\n",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "\nYou can find all these attributes in the list of DOM component props. If you get one wrong, don\u2019t worry\u2014React will print a message with a possible correction to the browser console.\nPitfall\nFor historical reasons, aria-* and data-* attributes are written as in HTML with dashes.\naria-*\ndata-*\nPro-tip: Use a JSX Converter",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "aria-*\ndata-*\nPro-tip: Use a JSX Converter\nConverting all these attributes in existing markup can be tedious! We recommend using a converter to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it\u2019s still worth understanding what is going on so that you can comfortably write JSX on your own.\nHere is your final result:\nexport default function TodoList() {\n return (\n <>\n Hedy Lamarr's Todos
\n \n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights
\n - Rehearse a movie scene
\n - Improve the spectrum technology
\n
\n \n );\n}\nRecap\nNow you know why JSX exists and how to use it in components:\nReact components group rendering logic together with markup because they are related.",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "React components group rendering logic together with markup because they are related.\nJSX is similar to HTML, with a few differences. You can use a converter if you need to.\nError messages will often point you in the right direction to fixing your markup.\nTry out some challenges\nThis HTML was pasted into a component, but it\u2019s not valid JSX. Fix it:\nexport default function Bio() {\n return (\n \n Welcome to my website!
\n \n ",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "
\n Welcome to my website!
\n \n \n You can find my thoughts here.\n
\n And pictures of scientists!\n
\n );\n}\nWhether to do it by hand or using the converter is up to you!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Keeping Components Pure\nSome JavaScript functions are pure. Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow.\nYou will learn\nWhat purity is and how it helps you avoid bugs\nHow to keep components pure by keeping changes out of the render phase",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "How to keep components pure by keeping changes out of the render phase\nHow to use Strict Mode to find mistakes in your components\nPurity: Components as formulas\nIn computer science (and especially the world of functional programming), a pure function is a function with the following characteristics:\nIt minds its own business. It does not change any objects or variables that existed before it was called.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Same inputs, same output. Given the same inputs, a pure function should always return the same result.\nYou might already be familiar with one example of pure functions: formulas in math.\nConsider this math formula: y = 2x.\nIf x = 2 then y = 4. Always.\nIf x = 3 then y = 6. Always.\nIf x = 3, y won\u2019t sometimes be 9 or \u20131 or 2.5 depending on the time of day or the state of the stock market.\nIf y = 2x and x = 3, y will always be 6.\nIf we made this into a JavaScript function, it would look like this:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "If we made this into a JavaScript function, it would look like this:\nfunction double(number) { return 2 * number;}\nfunction double(number) { return 2 * number;}\nIn the above example, double is a pure function. If you pass it 3, it will return 6. Always.\ndouble\n3\n6\nReact is designed around this concept. React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Recipe({ drinkers }) {\n return (\n \n - Boil {drinkers} cups of water.
\n - Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.
\n - Add {0.5 * drinkers} cups of milk to boil and sugar to taste.
\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function App() {\n return (\n \n Spiced Chai Recipe
\n For two
\n For a gathering
\n \n );\n}\nWhen you pass drinkers={2} to Recipe, it will return JSX containing 2 cups of water. Always.\ndrinkers={2}\nRecipe\n2 cups of water\nIf you pass drinkers={4}, it will return JSX containing 4 cups of water. Always.\ndrinkers={4}\n4 cups of water\nJust like a math formula.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "drinkers={4}\n4 cups of water\nJust like a math formula.\nYou could think of your components as recipes: if you follow them and don\u2019t introduce new ingredients during the cooking process, you will get the same dish every time. That \u201cdish\u201d is the JSX that the component serves to React to render.\nIllustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Illustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences\nReact\u2019s rendering process must always be pure. Components should only return their JSX, and not change any objects or variables that existed before rendering\u2014that would make them impure!\nHere is a component that breaks this rule:\nlet guest = 0;",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Cup() {\n // Bad: changing a preexisting variable!\n guest = guest + 1;\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n . Some frameworks do this by default.\n\nLocal mutation: Your component\u2019s little secret",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "\nLocal mutation: Your component\u2019s little secret\nIn the above example, the problem was that the component changed a preexisting variable while rendering. This is often called a \u201cmutation\u201d to make it sound a bit scarier. Pure functions don\u2019t mutate variables outside of the function\u2019s scope or objects that were created before the call\u2014that makes them impure!",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "However, it\u2019s completely fine to change variables and objects that you\u2019ve just created while rendering. In this example, you create an [] array, assign it to a cups variable, and then push a dozen cups into it:\n[]\ncups\npush\nfunction Cup({ guest }) {\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaGathering() {\n const cups = [];\n for (let i = 1; i <= 12; i++) {\n cups.push(\u2019s CSS class to \"night\" during the time from midnight to six hours in the morning, and \"day\" at all other times. However, it doesn\u2019t work. Can you fix this component?\n\n\"night\"\n\"day\"\nYou can verify whether your solution works by temporarily changing the computer\u2019s timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!\nexport default function Clock({ time }) {",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function Clock({ time }) {\n const hours = time.getHours();\n if (hours >= 0 && hours <= 6) {\n document.getElementById('time').className = 'night';\n } else {\n document.getElementById('time').className = 'day';\n }\n return (\n \n {time.toLocaleTimeString()}\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Reusing Logic with Custom Hooks\nReact comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you\u2019ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application\u2019s needs.\nuseState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own\nHow to reuse logic between components\nHow to name and structure your custom Hooks\nWhen and why to extract custom Hooks\nCustom Hooks: Sharing logic between components",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When and why to extract custom Hooks\nCustom Hooks: Sharing logic between components\nImagine you\u2019re developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you\u2019ll need two things in your component:\nA piece of state that tracks whether the network is online.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A piece of state that tracks whether the network is online.\nAn Effect that subscribes to the global online and offline events, and updates that state.\nonline\noffline\nThis will keep your component synchronized with the network status. You might start with something like this:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\nTry turning your network on and off, and notice how this StatusBar updates in response to your actions.\nStatusBar\nNow imagine you also want to use the same logic in a different component. You want to implement a Save button that will become disabled and show \u201cReconnecting\u2026\u201d instead of \u201cSave\u201d while the network is off.\nTo start, you can copy and paste the isOnline state and the Effect into SaveButton:\nisOnline\nSaveButton",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "isOnline\nSaveButton\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function SaveButton() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n \n );\n}\nVerify that, if you turn off the network, the button will change its appearance.\nThese two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different visual appearance, you want to reuse the logic between them.\nExtracting your own custom Hook from a component",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting your own custom Hook from a component\nImagine for a moment that, similar to useState and useEffect, there was a built-in useOnlineStatus Hook. Then both of these components could be simplified and you could remove the duplication between them:\nuseState\nuseEffect\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseEffect\nuseOnlineStatus\nfunction StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although there is no such built-in Hook, you can write it yourself. Declare a function called useOnlineStatus and move all the duplicated code into it from the components you wrote earlier:\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "At the end of the function, return isOnline. This lets your components read that value:\nisOnline\nimport { useOnlineStatus } from './useOnlineStatus.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() {\n const isOnline = useOnlineStatus();\n return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n\n function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }\n\n return (\n \n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n return (\n <>\n
Good morning, {firstName} {lastName}.
\n \n );\n}\nThere\u2019s some repetitive logic for each form field:\nThere\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "There\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName\nThere\u2019s a change handler (handleFirstNameChange and handleLastNameChange).\nhandleFirstNameChange\nhandleLastNameChange\nThere\u2019s a piece of JSX that specifies the value and onChange attributes for that input.\nvalue\nonChange\nYou can extract the repetitive logic into this useFormInput custom Hook:\nuseFormInput\nimport { useState } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useFormInput(initialValue) {\n const [value, setValue] = useState(initialValue);\n\n function handleChange(e) {\n setValue(e.target.value);\n }\n\n const inputProps = {\n value: value,\n onChange: handleChange\n };",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return inputProps;\n}\nNotice that it only declares one state variable called value.\nvalue\nHowever, the Form component calls useFormInput two times:\nForm\nuseFormInput\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nThis is why it works like declaring two separate state variables!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This is why it works like declaring two separate state variables!\nCustom Hooks let you share stateful logic but not state itself. Each call to a Hook is completely independent from every other call to the same Hook. This is why the two sandboxes above are completely equivalent. If you\u2019d like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When you need to share the state itself between multiple components, lift it up and pass it down instead.\nPassing reactive values between Hooks\nThe code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks need to be pure. Think of custom Hooks\u2019 code as part of your component\u2019s body!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room:\nimport { useState, useEffect } from 'react';\nimport { createConnection } from './chat.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useEffect(() => {\n const options = {\n serverUrl: serverUrl,\n roomId: roomId\n };\n const connection = createConnection(options);\n connection.on('message', (msg) => {\n showNotification('New message: ' + msg);\n });\n connection.connect();\n return () => connection.disconnect();\n }, [roomId, serverUrl]);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nWhen you change serverUrl or roomId, the Effect \u201creacts\u201d to your changes and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect\u2019s dependencies.\nserverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "serverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nThis lets your ChatRoom component call your custom Hook without worrying about how it works inside:\nChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}\nThis looks much simpler! (But it does the same thing.)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This looks much simpler! (But it does the same thing.)\nNotice that the logic still responds to prop and state changes. Try editing the server URL or the selected room:\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you\u2019re taking the return value of one Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...\nand passing it as an input to another Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Every time your ChatRoom component re-renders, it passes the latest roomId and serverUrl to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with audio or video processing software, chaining Hooks like this might remind you of chaining visual or audio effects. It\u2019s as if the output of useState \u201cfeeds into\u201d the input of the useChatRoom.)\nChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom\nPassing event handlers to custom Hooks\nUnder Construction\nThis section describes an experimental API that has not yet been released in a stable version of React.\nAs you start using useChatRoom in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nLet\u2019s say you want to move this logic back to your component:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s say you want to move this logic back to your component:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...\nTo make this work, change your custom Hook to take onReceiveMessage as one of its named options:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onReceiveMessage\nexport function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This will work, but there\u2019s one more improvement you can do when your custom Hook accepts event handlers.\nAdding a dependency on onReceiveMessage is not ideal because it will cause the chat to re-connect every time the component re-renders. Wrap this event handler into an Effect Event to remove it from the dependencies:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Now the chat won\u2019t re-connect every time that the ChatRoom component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:\nChatRoom\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl,\n onReceiveMessage(msg) {\n showNotification('New message: ' + msg);\n }\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you no longer need to know how useChatRoom works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That\u2019s the power of custom Hooks.\nuseChatRoom\nWhen to use custom Hooks",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nWhen to use custom Hooks\nYou don\u2019t need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a useFormInput Hook to wrap a single useState call like earlier is probably unnecessary.\nuseFormInput\nuseState",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useFormInput\nuseState\nHowever, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. You shouldn\u2019t need Effects very often, so if you\u2019re writing one, it means that you need to \u201cstep outside React\u201d to synchronize with some external system or to do something that React doesn\u2019t have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "For example, consider a ShippingForm component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although this code is quite repetitive, it\u2019s correct to keep these Effects separate from each other. They synchronize two different things, so you shouldn\u2019t merge them into one Effect. Instead, you can simplify the ShippingForm component above by extracting the common logic between them into your own useData Hook:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}\nNow you can replace both Effects in the ShippingForm components with calls to useData:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting a custom Hook makes the data flow explicit. You feed the url in and you get the data out. By \u201chiding\u201d your Effect inside useData, you also prevent someone working on the ShippingForm component from adding unnecessary dependencies to it. With time, most of your app\u2019s Effects will be in custom Hooks.\nurl\ndata\nuseData\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "url\ndata\nuseData\nShippingForm\nStart by choosing your custom Hook\u2019s name. If you struggle to pick a clear name, it might mean that your Effect is too coupled to the rest of your component\u2019s logic, and is not yet ready to be extracted.\nIdeally, your custom Hook\u2019s name should be clear enough that even a person who doesn\u2019t write code often could have a good guess about what your custom Hook does, what it takes, and what it returns:\n\u2705 useData(url)\nuseData(url)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "\u2705 useData(url)\nuseData(url)\n\u2705 useImpressionLog(eventName, extraData)\nuseImpressionLog(eventName, extraData)\n\u2705 useChatRoom(options)\nuseChatRoom(options)\nWhen you synchronize with an external system, your custom Hook name may be more technical and use jargon specific to that system. It\u2019s good as long as it would be clear to a person familiar with that system:\n\u2705 useMediaQuery(query)\nuseMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)\nuseIntersectionObserver(ref, options)\nKeep custom Hooks focused on concrete high-level use cases. Avoid creating and using custom \u201clifecycle\u201d Hooks that act as alternatives and convenience wrappers for the useEffect API itself:\nuseEffect\n\ud83d\udd34 useMount(fn)\nuseMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)\nFor example, this useMount Hook tries to ensure some code only runs \u201con mount\u201d:\nuseMount",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom \u201clifecycle\u201d Hooks like useMount don\u2019t fit well into the React paradigm. For example, this code example has a mistake (it doesn\u2019t \u201creact\u201d to roomId or serverUrl changes), but the linter won\u2019t warn you about it because the linter only checks direct useEffect calls. It won\u2019t know about your Hook.\nuseMount\nroomId\nserverUrl\nuseEffect\nIf you\u2019re writing an Effect, start by using the React API directly:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Then, you can (but don\u2019t have to) extract custom Hooks for different high-level use cases:\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A good custom Hook makes the calling code more declarative by constraining what it does. For example, useChatRoom(options) can only connect to the chat room, while useImpressionLog(eventName, extraData) can only send an impression log to the analytics. If your custom Hook API doesn\u2019t constrain the use cases and is very abstract, in the long run it\u2019s likely to introduce more problems than it solves.\nuseChatRoom(options)\nuseImpressionLog(eventName, extraData)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom(options)\nuseImpressionLog(eventName, extraData)\nCustom Hooks help you migrate to better patterns",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom Hooks help you migrate to better patterns\nEffects are an \u201cescape hatch\u201d: you use them when you need to \u201cstep outside React\u201d and when there is no better built-in solution for your use case. With time, the React team\u2019s goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping your Effects in custom Hooks makes it easier to upgrade your code when these solutions become available.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s return to this example:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "window.removeEventListener('offline', handleOffline);\n };\n }, []);\n return isOnline;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "In the above example, useOnlineStatus is implemented with a pair of useState and useEffect. However, this isn\u2019t the best possible solution. There is a number of edge cases it doesn\u2019t consider. For example, it assumes that when the component mounts, isOnline is already true, but this may be wrong if the network already went offline. You can use the browser navigator.onLine API to check for that, but using it directly would not work on the server for generating the initial HTML. In short, this",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "but using it directly would not work on the server for generating the initial HTML. In short, this code could be improved.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useOnlineStatus\nuseState\nuseEffect\nisOnline\ntrue\nnavigator.onLine\nReact includes a dedicated API called useSyncExternalStore which takes care of all of these problems for you. Here is your useOnlineStatus Hook, rewritten to take advantage of this new API:\nuseSyncExternalStore\nuseOnlineStatus\nimport { useSyncExternalStore } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function subscribe(callback) {\n window.addEventListener('online', callback);\n window.addEventListener('offline', callback);\n return () => {\n window.removeEventListener('online', callback);\n window.removeEventListener('offline', callback);\n };\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n return useSyncExternalStore(\n subscribe,\n () => navigator.onLine, // How to get the value on the client\n () => true // How to get the value on the server\n );\n}\nNotice how you didn\u2019t need to change any of the components to make this migration:\nfunction StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}\nThis is another reason for why wrapping Effects in custom Hooks is often beneficial:\nYou make the data flow to and from your Effects very explicit.\nYou let your components focus on the intent rather than on the exact implementation of your Effects.\nWhen React adds new features, you can remove those Effects without changing any of your components.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When React adds new features, you can remove those Effects without changing any of your components.\nSimilar to a design system, you might find it helpful to start extracting common idioms from your app\u2019s components into custom Hooks. This will keep your components\u2019 code focused on the intent, and let you avoid writing raw Effects very often. Many excellent custom Hooks are maintained by the React community.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "We\u2019re still working out the details, but we expect that in the future, you\u2019ll write data fetching like this:\nimport { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "If you use custom Hooks like useData above in your app, it will require fewer changes to migrate to the eventually recommended approach than if you write raw Effects in every component manually. However, the old approach will still work fine, so if you feel happy writing raw Effects, you can continue to do that.\nuseData\nThere is more than one way to do it",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useData\nThere is more than one way to do it\nLet\u2019s say you want to implement a fade-in animation from scratch using the browser requestAnimationFrame API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you hold in a ref until it reaches 1. Your code might start like this:\nrequestAnimationFrame\n1\nimport { useState, useEffect, useRef } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function Welcome() {\n const ref = useRef(null);\n\n useEffect(() => {\n const duration = 1000;\n const node = ref.current;\n\n let startTime = performance.now();\n let frameId = null;\n\n function onFrame(now) {\n const timePassed = now - startTime;\n const progress = Math.min(timePassed / duration, 1);\n onProgress(progress);\n if (progress < 1) {\n // We still have more frames to paint\n frameId = requestAnimationFrame(onFrame);\n }\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function onProgress(progress) {\n node.style.opacity = progress;\n }\n\n function start() {\n onProgress(0);\n startTime = performance.now();\n frameId = requestAnimationFrame(onFrame);\n }\n\n function stop() {\n cancelAnimationFrame(frameId);\n startTime = null;\n frameId = null;\n }\n\n start();\n return () => stop();\n }, []);\n\n return (\n \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && Seconds passed: {count}
;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() { const count = useCounter(); return Seconds passed: {count}
;}\nYou\u2019ll need to write your custom Hook in useCounter.js and import it into the App.js file.\nuseCounter.js\nApp.js\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(c => c + 1);\n }, 1000);\n return () => clearInterval(id);\n }, []);\n return Seconds passed: {count}
;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Thinking in React\nReact can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we\u2019ll guide you through the thought process of building a searchable product data table with React.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Start with the mockup\nImagine that you already have a JSON API and a mockup from a designer.\nThe JSON API returns some data that looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The JSON API returns some data that looks like this:\n[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]\nThe mockup looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The mockup looks like this:\nTo implement a UI in React, you will usually follow the same five steps.\nStep 1: Break the UI into a component hierarchy\nStart by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them!\nDepending on your background, you can think about splitting up a design into components in different ways:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Programming\u2014use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.\nCSS\u2014consider what you would make class selectors for. (However, components are a bit less granular.)\nDesign\u2014consider how you would organize the design\u2019s layers.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Design\u2014consider how you would organize the design\u2019s layers.\nIf your JSON is well-structured, you\u2019ll often find that it naturally maps to the component structure of your UI. That\u2019s because UI and data models often have the same information architecture\u2014that is, the same shape. Separate your UI into components, where each component matches one piece of your data model.\nThere are five components on this screen:\nFilterableProductTable (grey) contains the entire app.\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "FilterableProductTable (grey) contains the entire app.\nFilterableProductTable\nSearchBar (blue) receives the user input.\nSearchBar\nProductTable (lavender) displays and filters the list according to the user input.\nProductTable\nProductCategoryRow (green) displays a heading for each category.\nProductCategoryRow\nProductRow\t(yellow) displays a row for each product.\nProductRow",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\t(yellow) displays a row for each product.\nProductRow\nIf you look at ProductTable (lavender), you\u2019ll see that the table header (containing the \u201cName\u201d and \u201cPrice\u201d labels) isn\u2019t its own component. This is a matter of preference, and you could go either way. For this example, it is a part of ProductTable because it appears inside the ProductTable\u2019s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own ProductTableHeader component.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductTable\nProductTable\nProductTable\nProductTableHeader\nNow that you\u2019ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "SearchBar\nProductTable\n\nProductCategoryRow\nProductRow\nFilterableProductTable\nSearchBar\nSearchBar\nProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductCategoryRow\nProductRow\nProductTable\nProductCategoryRow\nProductCategoryRow\nProductRow\nProductRow\nStep 2: Build a static version in React",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\nStep 2: Build a static version in React\nNow that you have your component hierarchy, it\u2019s time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity\u2026 yet! It\u2019s often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "To build a static version of your app that renders your data model, you\u2019ll want to build components that reuse other components and pass data using props. Props are a way of passing data from parent to child. (If you\u2019re familiar with the concept of state, don\u2019t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don\u2019t need it.)",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "You can either build \u201ctop down\u201d by starting with building the components higher up in the hierarchy (like FilterableProductTable) or \u201cbottom up\u201d by working from components lower down (like ProductRow). In simpler examples, it\u2019s usually easier to go top-down, and on larger projects, it\u2019s easier to go bottom-up.\nFilterableProductTable\nProductRow\nfunction ProductCategoryRow({ category }) {\n return (\n \n \n {category}\n \n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;\n\n products.forEach((product) => {\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}\n\nfunction SearchBar() {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function FilterableProductTable({ products }) {\n return (\n \n \n \n {category}\n \n \n );\n}\n\nfunction ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products, filterText, inStockOnly }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "products.forEach((product) => {\n if (\n product.name.toLowerCase().indexOf(\n filterText.toLowerCase()\n ) === -1\n ) {\n return;\n }\n if (inStockOnly && !product.stocked) {\n return;\n }\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function SearchBar({ filterText, inStockOnly }) {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "const PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "export default function App() {\n return \n {walk ? 'Walk' : 'Stop'}\n
\n \n );\n}\nAdd an alert to the click handler. When the light is green and says \u201cWalk\u201d, clicking the button should say \u201cStop is next\u201d. When the light is red and says \u201cStop\u201d, clicking the button should say \u201cWalk is next\u201d.\nalert",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "alert\nDoes it make a difference whether you put the alert before or after the setWalk call?\nalert\nsetWalk",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "Sharing State Between Components\nSometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as lifting state up, and it\u2019s one of the most common things you will do writing React code.\nYou will learn\nHow to share state between components by lifting it up\nWhat are controlled and uncontrolled components\nLifting state up by example",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "What are controlled and uncontrolled components\nLifting state up by example\nIn this example, a parent Accordion component renders two separate Panels:\nAccordion\nPanel\nAccordion",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nEach Panel component has a boolean isActive state that determines whether its content is visible.\nPanel\nisActive\nPress the Show button for both panels:\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children }) {\n const [isActive, setIsActive] = useState(false);\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "\n \n );\n}\nNotice how pressing one panel\u2019s button does not affect the other panel\u2014they are independent.\nInitially, each Panel\u2019s isActive state is false, so they both appear collapsed\nPanel\nisActive\nfalse\nClicking either Panel\u2019s button will only update that Panel\u2019s isActive state alone\nPanel\nPanel\nisActive",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nisActive\nBut now let\u2019s say you want to change it so that only one panel is expanded at any given time. With that design, expanding the second panel should collapse the first one. How would you do that?\nTo coordinate these two panels, you need to \u201clift their state up\u201d to a parent component in three steps:\nRemove state from the child components.\nPass hardcoded data from the common parent.\nAdd state to the common parent and pass it down together with the event handlers.",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Add state to the common parent and pass it down together with the event handlers.\nThis will allow the Accordion component to coordinate both Panels and only expand one at a time.\nAccordion\nPanel\nStep 1: Remove state from the child components\nYou will give control of the Panel\u2019s isActive to its parent component. This means that the parent component will pass isActive to Panel as a prop instead. Start by removing this line from the Panel component:\nPanel\nisActive\nisActive\nPanel\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nisActive\nPanel\nPanel\nconst [isActive, setIsActive] = useState(false);\nconst [isActive, setIsActive] = useState(false);\nAnd instead, add isActive to the Panel\u2019s list of props:\nisActive\nPanel\nfunction Panel({ title, children, isActive }) {\nfunction Panel({ title, children, isActive }) {\nNow the Panel\u2019s parent component can control isActive by passing it down as a prop. Conversely, the Panel component now has no control over the value of isActive\u2014it\u2019s now up to the parent component!",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nPanel\nisActive\nStep 2: Pass hardcoded data from the common parent\nTo lift state up, you must locate the closest common parent component of both of the child components that you want to coordinate:\nAccordion (closest common parent)",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nIn this example, it\u2019s the Accordion component. Since it\u2019s above both panels and can control their props, it will become the \u201csource of truth\u201d for which panel is currently active. Make the Accordion component pass a hardcoded value of isActive (for example, true) to both panels:\nAccordion\nAccordion\nisActive\ntrue\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children, isActive }) {\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}\nTry editing the hardcoded isActive values in the Accordion component and see the result on the screen.\nisActive\nAccordion\nStep 3: Add state to the common parent",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "isActive\nAccordion\nStep 3: Add state to the common parent\nLifting state up often changes the nature of what you\u2019re storing as state.\nIn this case, only one panel should be active at a time. This means that the Accordion common parent component needs to keep track of which panel is the active one. Instead of a boolean value, it could use a number as the index of the active Panel for the state variable:\nAccordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Accordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);\nconst [activeIndex, setActiveIndex] = useState(0);\nWhen the activeIndex is 0, the first panel is active, and when it\u2019s 1, it\u2019s the second one.\nactiveIndex\n0\n1",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "activeIndex\n0\n1\nClicking the \u201cShow\u201d button in either Panel needs to change the active index in Accordion. A Panel can\u2019t set the activeIndex state directly because it\u2019s defined inside the Accordion. The Accordion component needs to explicitly allow the Panel component to change its state by passing an event handler down as a prop:\nPanel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel\n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... \n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "The
, etc.\n\n",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "\n\nJust like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you\u2019re reading is made out of React components:\n ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ![]()
tag with src and alt attributes. ![]()
is written like HTML, but it is actually JavaScript under the hood! This syntax is called JSX, and it lets you embed markup inside JavaScript.\n![]()
\nsrc\nalt\n![]()
\nReturn statements can be written all on one line, as in this component:\nreturn ;\nreturn ;",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "return ;\nBut if your markup isn\u2019t all on the same line as the return keyword, you must wrap it in a pair of parentheses:\nreturn\nreturn ( );\nreturn ( );\nPitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Pitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn\nUsing a component\nNow that you\u2019ve defined your Profile component, you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:\nProfile\nGallery\nProfile\nfunction Profile() {\n return (\n \n Amazing scientists
\n \n );\n}\nWhat the browser sees\nNotice the difference in casing:\n is lowercase, so React knows we refer to an HTML tag.\n\n![]()
. In the end, this is what the browser sees:\nProfile\n![]()
\n Amazing scientists
",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " Amazing scientists
\nNesting and organizing components",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Nesting and organizing components\nComponents are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move Profile to a separate file. You will learn how to do this shortly on the page about imports.\nProfile",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nBecause the Profile components are rendered inside Gallery\u2014even several times!\u2014we can say that Gallery is a parent component, rendering each Profile as a \u201cchild\u201d. This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.\nProfile\nGallery\nGallery\nProfile\nPitfall\nComponents can render other components, but you must never nest their definitions:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nPitfall\nComponents can render other components, but you must never nest their definitions:\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nThe snippet above is very slow and causes bugs. Instead, define every component at the top level:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "The snippet above is very slow and causes bugs. Instead, define every component at the top level:\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nWhen a child component needs some data from a parent, pass it by props instead of nesting definitions.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Your React application begins at a \u201croot\u201d component. Usually, it is created automatically when you start a new project. For example, if you use CodeSandbox or if you use the framework Next.js, the root component is defined in pages/index.js. In these examples, you\u2019ve been exporting root components.\npages/index.js",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "pages/index.js\nMost React apps use components all the way down. This means that you won\u2019t only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "React-based frameworks take this a step further. Instead of using an empty HTML file and letting React \u201ctake over\u201d managing the page with JavaScript, they also generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Still, many websites only use React to add interactivity to existing HTML pages. They have many root components instead of a single one for the entire page. You can use as much\u2014or as little\u2014React as you need.\nRecap\nYou\u2019ve just gotten your first taste of React! Let\u2019s recap some key points.\nReact lets you create components, reusable UI elements for your app.\nReact lets you create components, reusable UI elements for your app.\nIn a React app, every piece of UI is a component.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "In a React app, every piece of UI is a component.\nIn a React app, every piece of UI is a component.\nReact components are regular JavaScript functions except:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Their names always begin with a capital letter.\nThey return JSX markup.\nReact components are regular JavaScript functions except:\nTheir names always begin with a capital letter.\nThey return JSX markup.\nTry out some challenges\nThis sandbox doesn\u2019t work because the root component is not exported:\nfunction Profile() {\n return (\n Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\nAnd you want to put it into your component:\nexport default function TodoList() { return ( // ??? )}\nexport default function TodoList() { return ( // ??? )}\nIf you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (\n // This doesn't quite work!\n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights\n
- Rehearse a movie scene\n
- Improve the spectrum technology\n
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "- Rehearse a movie scene\n
- Improve the spectrum technology\n \nThis is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they\u2019ll guide you to fix the markup, or you can follow the guide below.\nNote\nMost of the time, React\u2019s on-screen error messages will help you find where the problem is. Give them a read if you get stuck!\nThe Rules of JSX\n1. Return a single root element",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "The Rules of JSX\n1. Return a single root element\nTo return multiple elements from a component, wrap them with a single parent tag.\nFor example, you can use a :\n\n
Hedy Lamarr's Todos
...
\n Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you don\u2019t want to add an extra to your markup, you can write <> and instead:\n\n<>\n\n<> Hedy Lamarr's Todos
...
\n<> Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "This empty tag is called a Fragment. Fragments let you group things without leaving any trace in the browser HTML tree.\nJSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can\u2019t return two objects from a function without wrapping them into an array. This explains why you also can\u2019t return two JSX tags without wrapping them into another tag or a Fragment.\n2. Close all the tags",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "2. Close all the tags\nJSX requires tags to be explicitly closed: self-closing tags like ![]()
must become ![]()
, and wrapping tags like - oranges must be written as
- oranges
.\n![]()
\n![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:\n<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\n3. camelCase all most of the things!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "3. camelCase all most of the things!\nJSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can\u2019t contain dashes or be reserved words like class.\nclass",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "class\nThis is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of stroke-width you use strokeWidth. Since class is a reserved word, in React you write className instead, named after the corresponding DOM property:\nstroke-width\nstrokeWidth\nclass\nclassName\n\n",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "\nYou can find all these attributes in the list of DOM component props. If you get one wrong, don\u2019t worry\u2014React will print a message with a possible correction to the browser console.\nPitfall\nFor historical reasons, aria-* and data-* attributes are written as in HTML with dashes.\naria-*\ndata-*\nPro-tip: Use a JSX Converter",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "aria-*\ndata-*\nPro-tip: Use a JSX Converter\nConverting all these attributes in existing markup can be tedious! We recommend using a converter to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it\u2019s still worth understanding what is going on so that you can comfortably write JSX on your own.\nHere is your final result:\nexport default function TodoList() {\n return (\n <>\n Hedy Lamarr's Todos
\n \n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights
\n - Rehearse a movie scene
\n - Improve the spectrum technology
\n
\n \n );\n}\nRecap\nNow you know why JSX exists and how to use it in components:\nReact components group rendering logic together with markup because they are related.",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "React components group rendering logic together with markup because they are related.\nJSX is similar to HTML, with a few differences. You can use a converter if you need to.\nError messages will often point you in the right direction to fixing your markup.\nTry out some challenges\nThis HTML was pasted into a component, but it\u2019s not valid JSX. Fix it:\nexport default function Bio() {\n return (\n \n Welcome to my website!
\n \n ",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "
\n Welcome to my website!
\n \n \n You can find my thoughts here.\n
\n And pictures of scientists!\n
\n );\n}\nWhether to do it by hand or using the converter is up to you!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Keeping Components Pure\nSome JavaScript functions are pure. Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow.\nYou will learn\nWhat purity is and how it helps you avoid bugs\nHow to keep components pure by keeping changes out of the render phase",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "How to keep components pure by keeping changes out of the render phase\nHow to use Strict Mode to find mistakes in your components\nPurity: Components as formulas\nIn computer science (and especially the world of functional programming), a pure function is a function with the following characteristics:\nIt minds its own business. It does not change any objects or variables that existed before it was called.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Same inputs, same output. Given the same inputs, a pure function should always return the same result.\nYou might already be familiar with one example of pure functions: formulas in math.\nConsider this math formula: y = 2x.\nIf x = 2 then y = 4. Always.\nIf x = 3 then y = 6. Always.\nIf x = 3, y won\u2019t sometimes be 9 or \u20131 or 2.5 depending on the time of day or the state of the stock market.\nIf y = 2x and x = 3, y will always be 6.\nIf we made this into a JavaScript function, it would look like this:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "If we made this into a JavaScript function, it would look like this:\nfunction double(number) { return 2 * number;}\nfunction double(number) { return 2 * number;}\nIn the above example, double is a pure function. If you pass it 3, it will return 6. Always.\ndouble\n3\n6\nReact is designed around this concept. React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Recipe({ drinkers }) {\n return (\n \n - Boil {drinkers} cups of water.
\n - Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.
\n - Add {0.5 * drinkers} cups of milk to boil and sugar to taste.
\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function App() {\n return (\n \n Spiced Chai Recipe
\n For two
\n For a gathering
\n \n );\n}\nWhen you pass drinkers={2} to Recipe, it will return JSX containing 2 cups of water. Always.\ndrinkers={2}\nRecipe\n2 cups of water\nIf you pass drinkers={4}, it will return JSX containing 4 cups of water. Always.\ndrinkers={4}\n4 cups of water\nJust like a math formula.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "drinkers={4}\n4 cups of water\nJust like a math formula.\nYou could think of your components as recipes: if you follow them and don\u2019t introduce new ingredients during the cooking process, you will get the same dish every time. That \u201cdish\u201d is the JSX that the component serves to React to render.\nIllustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Illustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences\nReact\u2019s rendering process must always be pure. Components should only return their JSX, and not change any objects or variables that existed before rendering\u2014that would make them impure!\nHere is a component that breaks this rule:\nlet guest = 0;",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Cup() {\n // Bad: changing a preexisting variable!\n guest = guest + 1;\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n . Some frameworks do this by default.\n\nLocal mutation: Your component\u2019s little secret",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "\nLocal mutation: Your component\u2019s little secret\nIn the above example, the problem was that the component changed a preexisting variable while rendering. This is often called a \u201cmutation\u201d to make it sound a bit scarier. Pure functions don\u2019t mutate variables outside of the function\u2019s scope or objects that were created before the call\u2014that makes them impure!",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "However, it\u2019s completely fine to change variables and objects that you\u2019ve just created while rendering. In this example, you create an [] array, assign it to a cups variable, and then push a dozen cups into it:\n[]\ncups\npush\nfunction Cup({ guest }) {\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaGathering() {\n const cups = [];\n for (let i = 1; i <= 12; i++) {\n cups.push(\u2019s CSS class to \"night\" during the time from midnight to six hours in the morning, and \"day\" at all other times. However, it doesn\u2019t work. Can you fix this component?\n\n\"night\"\n\"day\"\nYou can verify whether your solution works by temporarily changing the computer\u2019s timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!\nexport default function Clock({ time }) {",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function Clock({ time }) {\n const hours = time.getHours();\n if (hours >= 0 && hours <= 6) {\n document.getElementById('time').className = 'night';\n } else {\n document.getElementById('time').className = 'day';\n }\n return (\n \n {time.toLocaleTimeString()}\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Reusing Logic with Custom Hooks\nReact comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you\u2019ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application\u2019s needs.\nuseState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own\nHow to reuse logic between components\nHow to name and structure your custom Hooks\nWhen and why to extract custom Hooks\nCustom Hooks: Sharing logic between components",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When and why to extract custom Hooks\nCustom Hooks: Sharing logic between components\nImagine you\u2019re developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you\u2019ll need two things in your component:\nA piece of state that tracks whether the network is online.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A piece of state that tracks whether the network is online.\nAn Effect that subscribes to the global online and offline events, and updates that state.\nonline\noffline\nThis will keep your component synchronized with the network status. You might start with something like this:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\nTry turning your network on and off, and notice how this StatusBar updates in response to your actions.\nStatusBar\nNow imagine you also want to use the same logic in a different component. You want to implement a Save button that will become disabled and show \u201cReconnecting\u2026\u201d instead of \u201cSave\u201d while the network is off.\nTo start, you can copy and paste the isOnline state and the Effect into SaveButton:\nisOnline\nSaveButton",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "isOnline\nSaveButton\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function SaveButton() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n \n );\n}\nVerify that, if you turn off the network, the button will change its appearance.\nThese two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different visual appearance, you want to reuse the logic between them.\nExtracting your own custom Hook from a component",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting your own custom Hook from a component\nImagine for a moment that, similar to useState and useEffect, there was a built-in useOnlineStatus Hook. Then both of these components could be simplified and you could remove the duplication between them:\nuseState\nuseEffect\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseEffect\nuseOnlineStatus\nfunction StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although there is no such built-in Hook, you can write it yourself. Declare a function called useOnlineStatus and move all the duplicated code into it from the components you wrote earlier:\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "At the end of the function, return isOnline. This lets your components read that value:\nisOnline\nimport { useOnlineStatus } from './useOnlineStatus.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() {\n const isOnline = useOnlineStatus();\n return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n\n function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }\n\n return (\n \n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n return (\n <>\n
Good morning, {firstName} {lastName}.
\n \n );\n}\nThere\u2019s some repetitive logic for each form field:\nThere\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "There\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName\nThere\u2019s a change handler (handleFirstNameChange and handleLastNameChange).\nhandleFirstNameChange\nhandleLastNameChange\nThere\u2019s a piece of JSX that specifies the value and onChange attributes for that input.\nvalue\nonChange\nYou can extract the repetitive logic into this useFormInput custom Hook:\nuseFormInput\nimport { useState } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useFormInput(initialValue) {\n const [value, setValue] = useState(initialValue);\n\n function handleChange(e) {\n setValue(e.target.value);\n }\n\n const inputProps = {\n value: value,\n onChange: handleChange\n };",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return inputProps;\n}\nNotice that it only declares one state variable called value.\nvalue\nHowever, the Form component calls useFormInput two times:\nForm\nuseFormInput\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nThis is why it works like declaring two separate state variables!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This is why it works like declaring two separate state variables!\nCustom Hooks let you share stateful logic but not state itself. Each call to a Hook is completely independent from every other call to the same Hook. This is why the two sandboxes above are completely equivalent. If you\u2019d like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When you need to share the state itself between multiple components, lift it up and pass it down instead.\nPassing reactive values between Hooks\nThe code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks need to be pure. Think of custom Hooks\u2019 code as part of your component\u2019s body!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room:\nimport { useState, useEffect } from 'react';\nimport { createConnection } from './chat.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useEffect(() => {\n const options = {\n serverUrl: serverUrl,\n roomId: roomId\n };\n const connection = createConnection(options);\n connection.on('message', (msg) => {\n showNotification('New message: ' + msg);\n });\n connection.connect();\n return () => connection.disconnect();\n }, [roomId, serverUrl]);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nWhen you change serverUrl or roomId, the Effect \u201creacts\u201d to your changes and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect\u2019s dependencies.\nserverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "serverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nThis lets your ChatRoom component call your custom Hook without worrying about how it works inside:\nChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}\nThis looks much simpler! (But it does the same thing.)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This looks much simpler! (But it does the same thing.)\nNotice that the logic still responds to prop and state changes. Try editing the server URL or the selected room:\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you\u2019re taking the return value of one Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...\nand passing it as an input to another Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Every time your ChatRoom component re-renders, it passes the latest roomId and serverUrl to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with audio or video processing software, chaining Hooks like this might remind you of chaining visual or audio effects. It\u2019s as if the output of useState \u201cfeeds into\u201d the input of the useChatRoom.)\nChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom\nPassing event handlers to custom Hooks\nUnder Construction\nThis section describes an experimental API that has not yet been released in a stable version of React.\nAs you start using useChatRoom in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nLet\u2019s say you want to move this logic back to your component:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s say you want to move this logic back to your component:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...\nTo make this work, change your custom Hook to take onReceiveMessage as one of its named options:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onReceiveMessage\nexport function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This will work, but there\u2019s one more improvement you can do when your custom Hook accepts event handlers.\nAdding a dependency on onReceiveMessage is not ideal because it will cause the chat to re-connect every time the component re-renders. Wrap this event handler into an Effect Event to remove it from the dependencies:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Now the chat won\u2019t re-connect every time that the ChatRoom component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:\nChatRoom\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl,\n onReceiveMessage(msg) {\n showNotification('New message: ' + msg);\n }\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you no longer need to know how useChatRoom works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That\u2019s the power of custom Hooks.\nuseChatRoom\nWhen to use custom Hooks",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nWhen to use custom Hooks\nYou don\u2019t need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a useFormInput Hook to wrap a single useState call like earlier is probably unnecessary.\nuseFormInput\nuseState",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useFormInput\nuseState\nHowever, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. You shouldn\u2019t need Effects very often, so if you\u2019re writing one, it means that you need to \u201cstep outside React\u201d to synchronize with some external system or to do something that React doesn\u2019t have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "For example, consider a ShippingForm component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although this code is quite repetitive, it\u2019s correct to keep these Effects separate from each other. They synchronize two different things, so you shouldn\u2019t merge them into one Effect. Instead, you can simplify the ShippingForm component above by extracting the common logic between them into your own useData Hook:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}\nNow you can replace both Effects in the ShippingForm components with calls to useData:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting a custom Hook makes the data flow explicit. You feed the url in and you get the data out. By \u201chiding\u201d your Effect inside useData, you also prevent someone working on the ShippingForm component from adding unnecessary dependencies to it. With time, most of your app\u2019s Effects will be in custom Hooks.\nurl\ndata\nuseData\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "url\ndata\nuseData\nShippingForm\nStart by choosing your custom Hook\u2019s name. If you struggle to pick a clear name, it might mean that your Effect is too coupled to the rest of your component\u2019s logic, and is not yet ready to be extracted.\nIdeally, your custom Hook\u2019s name should be clear enough that even a person who doesn\u2019t write code often could have a good guess about what your custom Hook does, what it takes, and what it returns:\n\u2705 useData(url)\nuseData(url)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "\u2705 useData(url)\nuseData(url)\n\u2705 useImpressionLog(eventName, extraData)\nuseImpressionLog(eventName, extraData)\n\u2705 useChatRoom(options)\nuseChatRoom(options)\nWhen you synchronize with an external system, your custom Hook name may be more technical and use jargon specific to that system. It\u2019s good as long as it would be clear to a person familiar with that system:\n\u2705 useMediaQuery(query)\nuseMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)\nuseIntersectionObserver(ref, options)\nKeep custom Hooks focused on concrete high-level use cases. Avoid creating and using custom \u201clifecycle\u201d Hooks that act as alternatives and convenience wrappers for the useEffect API itself:\nuseEffect\n\ud83d\udd34 useMount(fn)\nuseMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)\nFor example, this useMount Hook tries to ensure some code only runs \u201con mount\u201d:\nuseMount",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom \u201clifecycle\u201d Hooks like useMount don\u2019t fit well into the React paradigm. For example, this code example has a mistake (it doesn\u2019t \u201creact\u201d to roomId or serverUrl changes), but the linter won\u2019t warn you about it because the linter only checks direct useEffect calls. It won\u2019t know about your Hook.\nuseMount\nroomId\nserverUrl\nuseEffect\nIf you\u2019re writing an Effect, start by using the React API directly:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Then, you can (but don\u2019t have to) extract custom Hooks for different high-level use cases:\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A good custom Hook makes the calling code more declarative by constraining what it does. For example, useChatRoom(options) can only connect to the chat room, while useImpressionLog(eventName, extraData) can only send an impression log to the analytics. If your custom Hook API doesn\u2019t constrain the use cases and is very abstract, in the long run it\u2019s likely to introduce more problems than it solves.\nuseChatRoom(options)\nuseImpressionLog(eventName, extraData)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom(options)\nuseImpressionLog(eventName, extraData)\nCustom Hooks help you migrate to better patterns",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom Hooks help you migrate to better patterns\nEffects are an \u201cescape hatch\u201d: you use them when you need to \u201cstep outside React\u201d and when there is no better built-in solution for your use case. With time, the React team\u2019s goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping your Effects in custom Hooks makes it easier to upgrade your code when these solutions become available.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s return to this example:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "window.removeEventListener('offline', handleOffline);\n };\n }, []);\n return isOnline;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "In the above example, useOnlineStatus is implemented with a pair of useState and useEffect. However, this isn\u2019t the best possible solution. There is a number of edge cases it doesn\u2019t consider. For example, it assumes that when the component mounts, isOnline is already true, but this may be wrong if the network already went offline. You can use the browser navigator.onLine API to check for that, but using it directly would not work on the server for generating the initial HTML. In short, this",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "but using it directly would not work on the server for generating the initial HTML. In short, this code could be improved.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useOnlineStatus\nuseState\nuseEffect\nisOnline\ntrue\nnavigator.onLine\nReact includes a dedicated API called useSyncExternalStore which takes care of all of these problems for you. Here is your useOnlineStatus Hook, rewritten to take advantage of this new API:\nuseSyncExternalStore\nuseOnlineStatus\nimport { useSyncExternalStore } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function subscribe(callback) {\n window.addEventListener('online', callback);\n window.addEventListener('offline', callback);\n return () => {\n window.removeEventListener('online', callback);\n window.removeEventListener('offline', callback);\n };\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n return useSyncExternalStore(\n subscribe,\n () => navigator.onLine, // How to get the value on the client\n () => true // How to get the value on the server\n );\n}\nNotice how you didn\u2019t need to change any of the components to make this migration:\nfunction StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}\nThis is another reason for why wrapping Effects in custom Hooks is often beneficial:\nYou make the data flow to and from your Effects very explicit.\nYou let your components focus on the intent rather than on the exact implementation of your Effects.\nWhen React adds new features, you can remove those Effects without changing any of your components.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When React adds new features, you can remove those Effects without changing any of your components.\nSimilar to a design system, you might find it helpful to start extracting common idioms from your app\u2019s components into custom Hooks. This will keep your components\u2019 code focused on the intent, and let you avoid writing raw Effects very often. Many excellent custom Hooks are maintained by the React community.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "We\u2019re still working out the details, but we expect that in the future, you\u2019ll write data fetching like this:\nimport { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "If you use custom Hooks like useData above in your app, it will require fewer changes to migrate to the eventually recommended approach than if you write raw Effects in every component manually. However, the old approach will still work fine, so if you feel happy writing raw Effects, you can continue to do that.\nuseData\nThere is more than one way to do it",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useData\nThere is more than one way to do it\nLet\u2019s say you want to implement a fade-in animation from scratch using the browser requestAnimationFrame API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you hold in a ref until it reaches 1. Your code might start like this:\nrequestAnimationFrame\n1\nimport { useState, useEffect, useRef } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function Welcome() {\n const ref = useRef(null);\n\n useEffect(() => {\n const duration = 1000;\n const node = ref.current;\n\n let startTime = performance.now();\n let frameId = null;\n\n function onFrame(now) {\n const timePassed = now - startTime;\n const progress = Math.min(timePassed / duration, 1);\n onProgress(progress);\n if (progress < 1) {\n // We still have more frames to paint\n frameId = requestAnimationFrame(onFrame);\n }\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function onProgress(progress) {\n node.style.opacity = progress;\n }\n\n function start() {\n onProgress(0);\n startTime = performance.now();\n frameId = requestAnimationFrame(onFrame);\n }\n\n function stop() {\n cancelAnimationFrame(frameId);\n startTime = null;\n frameId = null;\n }\n\n start();\n return () => stop();\n }, []);\n\n return (\n \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && Seconds passed: {count}
;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() { const count = useCounter(); return Seconds passed: {count}
;}\nYou\u2019ll need to write your custom Hook in useCounter.js and import it into the App.js file.\nuseCounter.js\nApp.js\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(c => c + 1);\n }, 1000);\n return () => clearInterval(id);\n }, []);\n return Seconds passed: {count}
;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Thinking in React\nReact can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we\u2019ll guide you through the thought process of building a searchable product data table with React.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Start with the mockup\nImagine that you already have a JSON API and a mockup from a designer.\nThe JSON API returns some data that looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The JSON API returns some data that looks like this:\n[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]\nThe mockup looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The mockup looks like this:\nTo implement a UI in React, you will usually follow the same five steps.\nStep 1: Break the UI into a component hierarchy\nStart by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them!\nDepending on your background, you can think about splitting up a design into components in different ways:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Programming\u2014use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.\nCSS\u2014consider what you would make class selectors for. (However, components are a bit less granular.)\nDesign\u2014consider how you would organize the design\u2019s layers.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Design\u2014consider how you would organize the design\u2019s layers.\nIf your JSON is well-structured, you\u2019ll often find that it naturally maps to the component structure of your UI. That\u2019s because UI and data models often have the same information architecture\u2014that is, the same shape. Separate your UI into components, where each component matches one piece of your data model.\nThere are five components on this screen:\nFilterableProductTable (grey) contains the entire app.\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "FilterableProductTable (grey) contains the entire app.\nFilterableProductTable\nSearchBar (blue) receives the user input.\nSearchBar\nProductTable (lavender) displays and filters the list according to the user input.\nProductTable\nProductCategoryRow (green) displays a heading for each category.\nProductCategoryRow\nProductRow\t(yellow) displays a row for each product.\nProductRow",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\t(yellow) displays a row for each product.\nProductRow\nIf you look at ProductTable (lavender), you\u2019ll see that the table header (containing the \u201cName\u201d and \u201cPrice\u201d labels) isn\u2019t its own component. This is a matter of preference, and you could go either way. For this example, it is a part of ProductTable because it appears inside the ProductTable\u2019s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own ProductTableHeader component.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductTable\nProductTable\nProductTable\nProductTableHeader\nNow that you\u2019ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "SearchBar\nProductTable\n\nProductCategoryRow\nProductRow\nFilterableProductTable\nSearchBar\nSearchBar\nProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductCategoryRow\nProductRow\nProductTable\nProductCategoryRow\nProductCategoryRow\nProductRow\nProductRow\nStep 2: Build a static version in React",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\nStep 2: Build a static version in React\nNow that you have your component hierarchy, it\u2019s time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity\u2026 yet! It\u2019s often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "To build a static version of your app that renders your data model, you\u2019ll want to build components that reuse other components and pass data using props. Props are a way of passing data from parent to child. (If you\u2019re familiar with the concept of state, don\u2019t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don\u2019t need it.)",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "You can either build \u201ctop down\u201d by starting with building the components higher up in the hierarchy (like FilterableProductTable) or \u201cbottom up\u201d by working from components lower down (like ProductRow). In simpler examples, it\u2019s usually easier to go top-down, and on larger projects, it\u2019s easier to go bottom-up.\nFilterableProductTable\nProductRow\nfunction ProductCategoryRow({ category }) {\n return (\n \n \n {category}\n \n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;\n\n products.forEach((product) => {\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}\n\nfunction SearchBar() {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function FilterableProductTable({ products }) {\n return (\n \n \n \n {category}\n \n \n );\n}\n\nfunction ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products, filterText, inStockOnly }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "products.forEach((product) => {\n if (\n product.name.toLowerCase().indexOf(\n filterText.toLowerCase()\n ) === -1\n ) {\n return;\n }\n if (inStockOnly && !product.stocked) {\n return;\n }\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function SearchBar({ filterText, inStockOnly }) {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "const PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "export default function App() {\n return \n {walk ? 'Walk' : 'Stop'}\n
\n \n );\n}\nAdd an alert to the click handler. When the light is green and says \u201cWalk\u201d, clicking the button should say \u201cStop is next\u201d. When the light is red and says \u201cStop\u201d, clicking the button should say \u201cWalk is next\u201d.\nalert",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "alert\nDoes it make a difference whether you put the alert before or after the setWalk call?\nalert\nsetWalk",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "Sharing State Between Components\nSometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as lifting state up, and it\u2019s one of the most common things you will do writing React code.\nYou will learn\nHow to share state between components by lifting it up\nWhat are controlled and uncontrolled components\nLifting state up by example",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "What are controlled and uncontrolled components\nLifting state up by example\nIn this example, a parent Accordion component renders two separate Panels:\nAccordion\nPanel\nAccordion",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nEach Panel component has a boolean isActive state that determines whether its content is visible.\nPanel\nisActive\nPress the Show button for both panels:\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children }) {\n const [isActive, setIsActive] = useState(false);\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "\n \n );\n}\nNotice how pressing one panel\u2019s button does not affect the other panel\u2014they are independent.\nInitially, each Panel\u2019s isActive state is false, so they both appear collapsed\nPanel\nisActive\nfalse\nClicking either Panel\u2019s button will only update that Panel\u2019s isActive state alone\nPanel\nPanel\nisActive",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nisActive\nBut now let\u2019s say you want to change it so that only one panel is expanded at any given time. With that design, expanding the second panel should collapse the first one. How would you do that?\nTo coordinate these two panels, you need to \u201clift their state up\u201d to a parent component in three steps:\nRemove state from the child components.\nPass hardcoded data from the common parent.\nAdd state to the common parent and pass it down together with the event handlers.",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Add state to the common parent and pass it down together with the event handlers.\nThis will allow the Accordion component to coordinate both Panels and only expand one at a time.\nAccordion\nPanel\nStep 1: Remove state from the child components\nYou will give control of the Panel\u2019s isActive to its parent component. This means that the parent component will pass isActive to Panel as a prop instead. Start by removing this line from the Panel component:\nPanel\nisActive\nisActive\nPanel\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nisActive\nPanel\nPanel\nconst [isActive, setIsActive] = useState(false);\nconst [isActive, setIsActive] = useState(false);\nAnd instead, add isActive to the Panel\u2019s list of props:\nisActive\nPanel\nfunction Panel({ title, children, isActive }) {\nfunction Panel({ title, children, isActive }) {\nNow the Panel\u2019s parent component can control isActive by passing it down as a prop. Conversely, the Panel component now has no control over the value of isActive\u2014it\u2019s now up to the parent component!",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nPanel\nisActive\nStep 2: Pass hardcoded data from the common parent\nTo lift state up, you must locate the closest common parent component of both of the child components that you want to coordinate:\nAccordion (closest common parent)",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nIn this example, it\u2019s the Accordion component. Since it\u2019s above both panels and can control their props, it will become the \u201csource of truth\u201d for which panel is currently active. Make the Accordion component pass a hardcoded value of isActive (for example, true) to both panels:\nAccordion\nAccordion\nisActive\ntrue\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children, isActive }) {\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}\nTry editing the hardcoded isActive values in the Accordion component and see the result on the screen.\nisActive\nAccordion\nStep 3: Add state to the common parent",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "isActive\nAccordion\nStep 3: Add state to the common parent\nLifting state up often changes the nature of what you\u2019re storing as state.\nIn this case, only one panel should be active at a time. This means that the Accordion common parent component needs to keep track of which panel is the active one. Instead of a boolean value, it could use a number as the index of the active Panel for the state variable:\nAccordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Accordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);\nconst [activeIndex, setActiveIndex] = useState(0);\nWhen the activeIndex is 0, the first panel is active, and when it\u2019s 1, it\u2019s the second one.\nactiveIndex\n0\n1",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "activeIndex\n0\n1\nClicking the \u201cShow\u201d button in either Panel needs to change the active index in Accordion. A Panel can\u2019t set the activeIndex state directly because it\u2019s defined inside the Accordion. The Accordion component needs to explicitly allow the Panel component to change its state by passing an event handler down as a prop:\nPanel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel\n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... \n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "The
",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "\n\nJust like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you\u2019re reading is made out of React components:\n ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ![]()
tag with src and alt attributes. ![]()
is written like HTML, but it is actually JavaScript under the hood! This syntax is called JSX, and it lets you embed markup inside JavaScript.\n![]()
\nsrc\nalt\n![]()
\nReturn statements can be written all on one line, as in this component:\nreturn ;\nreturn ;",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "return ;\nBut if your markup isn\u2019t all on the same line as the return keyword, you must wrap it in a pair of parentheses:\nreturn\nreturn ( );\nreturn ( );\nPitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Pitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn\nUsing a component\nNow that you\u2019ve defined your Profile component, you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:\nProfile\nGallery\nProfile\nfunction Profile() {\n return (\n \n Amazing scientists
\n \n );\n}\nWhat the browser sees\nNotice the difference in casing:\n is lowercase, so React knows we refer to an HTML tag.\n\n![]()
. In the end, this is what the browser sees:\nProfile\n![]()
\n Amazing scientists
",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " Amazing scientists
\nNesting and organizing components",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Nesting and organizing components\nComponents are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move Profile to a separate file. You will learn how to do this shortly on the page about imports.\nProfile",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nBecause the Profile components are rendered inside Gallery\u2014even several times!\u2014we can say that Gallery is a parent component, rendering each Profile as a \u201cchild\u201d. This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.\nProfile\nGallery\nGallery\nProfile\nPitfall\nComponents can render other components, but you must never nest their definitions:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nPitfall\nComponents can render other components, but you must never nest their definitions:\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nThe snippet above is very slow and causes bugs. Instead, define every component at the top level:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "The snippet above is very slow and causes bugs. Instead, define every component at the top level:\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nWhen a child component needs some data from a parent, pass it by props instead of nesting definitions.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Your React application begins at a \u201croot\u201d component. Usually, it is created automatically when you start a new project. For example, if you use CodeSandbox or if you use the framework Next.js, the root component is defined in pages/index.js. In these examples, you\u2019ve been exporting root components.\npages/index.js",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "pages/index.js\nMost React apps use components all the way down. This means that you won\u2019t only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "React-based frameworks take this a step further. Instead of using an empty HTML file and letting React \u201ctake over\u201d managing the page with JavaScript, they also generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Still, many websites only use React to add interactivity to existing HTML pages. They have many root components instead of a single one for the entire page. You can use as much\u2014or as little\u2014React as you need.\nRecap\nYou\u2019ve just gotten your first taste of React! Let\u2019s recap some key points.\nReact lets you create components, reusable UI elements for your app.\nReact lets you create components, reusable UI elements for your app.\nIn a React app, every piece of UI is a component.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "In a React app, every piece of UI is a component.\nIn a React app, every piece of UI is a component.\nReact components are regular JavaScript functions except:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Their names always begin with a capital letter.\nThey return JSX markup.\nReact components are regular JavaScript functions except:\nTheir names always begin with a capital letter.\nThey return JSX markup.\nTry out some challenges\nThis sandbox doesn\u2019t work because the root component is not exported:\nfunction Profile() {\n return (\n Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\nAnd you want to put it into your component:\nexport default function TodoList() { return ( // ??? )}\nexport default function TodoList() { return ( // ??? )}\nIf you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (\n // This doesn't quite work!\n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights\n
- Rehearse a movie scene\n
- Improve the spectrum technology\n
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "- Rehearse a movie scene\n
- Improve the spectrum technology\n \nThis is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they\u2019ll guide you to fix the markup, or you can follow the guide below.\nNote\nMost of the time, React\u2019s on-screen error messages will help you find where the problem is. Give them a read if you get stuck!\nThe Rules of JSX\n1. Return a single root element",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "The Rules of JSX\n1. Return a single root element\nTo return multiple elements from a component, wrap them with a single parent tag.\nFor example, you can use a :\n\n
Hedy Lamarr's Todos
...
\n Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you don\u2019t want to add an extra to your markup, you can write <> and instead:\n\n<>\n\n<> Hedy Lamarr's Todos
...
\n<> Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "This empty tag is called a Fragment. Fragments let you group things without leaving any trace in the browser HTML tree.\nJSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can\u2019t return two objects from a function without wrapping them into an array. This explains why you also can\u2019t return two JSX tags without wrapping them into another tag or a Fragment.\n2. Close all the tags",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "2. Close all the tags\nJSX requires tags to be explicitly closed: self-closing tags like ![]()
must become ![]()
, and wrapping tags like - oranges must be written as
- oranges
.\n![]()
\n![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:\n<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\n3. camelCase all most of the things!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "3. camelCase all most of the things!\nJSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can\u2019t contain dashes or be reserved words like class.\nclass",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "class\nThis is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of stroke-width you use strokeWidth. Since class is a reserved word, in React you write className instead, named after the corresponding DOM property:\nstroke-width\nstrokeWidth\nclass\nclassName\n\n",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "\nYou can find all these attributes in the list of DOM component props. If you get one wrong, don\u2019t worry\u2014React will print a message with a possible correction to the browser console.\nPitfall\nFor historical reasons, aria-* and data-* attributes are written as in HTML with dashes.\naria-*\ndata-*\nPro-tip: Use a JSX Converter",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "aria-*\ndata-*\nPro-tip: Use a JSX Converter\nConverting all these attributes in existing markup can be tedious! We recommend using a converter to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it\u2019s still worth understanding what is going on so that you can comfortably write JSX on your own.\nHere is your final result:\nexport default function TodoList() {\n return (\n <>\n Hedy Lamarr's Todos
\n \n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights
\n - Rehearse a movie scene
\n - Improve the spectrum technology
\n
\n \n );\n}\nRecap\nNow you know why JSX exists and how to use it in components:\nReact components group rendering logic together with markup because they are related.",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "React components group rendering logic together with markup because they are related.\nJSX is similar to HTML, with a few differences. You can use a converter if you need to.\nError messages will often point you in the right direction to fixing your markup.\nTry out some challenges\nThis HTML was pasted into a component, but it\u2019s not valid JSX. Fix it:\nexport default function Bio() {\n return (\n \n Welcome to my website!
\n \n ",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "
\n Welcome to my website!
\n \n \n You can find my thoughts here.\n
\n And pictures of scientists!\n
\n );\n}\nWhether to do it by hand or using the converter is up to you!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Keeping Components Pure\nSome JavaScript functions are pure. Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow.\nYou will learn\nWhat purity is and how it helps you avoid bugs\nHow to keep components pure by keeping changes out of the render phase",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "How to keep components pure by keeping changes out of the render phase\nHow to use Strict Mode to find mistakes in your components\nPurity: Components as formulas\nIn computer science (and especially the world of functional programming), a pure function is a function with the following characteristics:\nIt minds its own business. It does not change any objects or variables that existed before it was called.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Same inputs, same output. Given the same inputs, a pure function should always return the same result.\nYou might already be familiar with one example of pure functions: formulas in math.\nConsider this math formula: y = 2x.\nIf x = 2 then y = 4. Always.\nIf x = 3 then y = 6. Always.\nIf x = 3, y won\u2019t sometimes be 9 or \u20131 or 2.5 depending on the time of day or the state of the stock market.\nIf y = 2x and x = 3, y will always be 6.\nIf we made this into a JavaScript function, it would look like this:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "If we made this into a JavaScript function, it would look like this:\nfunction double(number) { return 2 * number;}\nfunction double(number) { return 2 * number;}\nIn the above example, double is a pure function. If you pass it 3, it will return 6. Always.\ndouble\n3\n6\nReact is designed around this concept. React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Recipe({ drinkers }) {\n return (\n \n - Boil {drinkers} cups of water.
\n - Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.
\n - Add {0.5 * drinkers} cups of milk to boil and sugar to taste.
\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function App() {\n return (\n \n Spiced Chai Recipe
\n For two
\n For a gathering
\n \n );\n}\nWhen you pass drinkers={2} to Recipe, it will return JSX containing 2 cups of water. Always.\ndrinkers={2}\nRecipe\n2 cups of water\nIf you pass drinkers={4}, it will return JSX containing 4 cups of water. Always.\ndrinkers={4}\n4 cups of water\nJust like a math formula.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "drinkers={4}\n4 cups of water\nJust like a math formula.\nYou could think of your components as recipes: if you follow them and don\u2019t introduce new ingredients during the cooking process, you will get the same dish every time. That \u201cdish\u201d is the JSX that the component serves to React to render.\nIllustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Illustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences\nReact\u2019s rendering process must always be pure. Components should only return their JSX, and not change any objects or variables that existed before rendering\u2014that would make them impure!\nHere is a component that breaks this rule:\nlet guest = 0;",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Cup() {\n // Bad: changing a preexisting variable!\n guest = guest + 1;\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n . Some frameworks do this by default.\n\nLocal mutation: Your component\u2019s little secret",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "\nLocal mutation: Your component\u2019s little secret\nIn the above example, the problem was that the component changed a preexisting variable while rendering. This is often called a \u201cmutation\u201d to make it sound a bit scarier. Pure functions don\u2019t mutate variables outside of the function\u2019s scope or objects that were created before the call\u2014that makes them impure!",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "However, it\u2019s completely fine to change variables and objects that you\u2019ve just created while rendering. In this example, you create an [] array, assign it to a cups variable, and then push a dozen cups into it:\n[]\ncups\npush\nfunction Cup({ guest }) {\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaGathering() {\n const cups = [];\n for (let i = 1; i <= 12; i++) {\n cups.push(\u2019s CSS class to \"night\" during the time from midnight to six hours in the morning, and \"day\" at all other times. However, it doesn\u2019t work. Can you fix this component?\n\n\"night\"\n\"day\"\nYou can verify whether your solution works by temporarily changing the computer\u2019s timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!\nexport default function Clock({ time }) {",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function Clock({ time }) {\n const hours = time.getHours();\n if (hours >= 0 && hours <= 6) {\n document.getElementById('time').className = 'night';\n } else {\n document.getElementById('time').className = 'day';\n }\n return (\n \n {time.toLocaleTimeString()}\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Reusing Logic with Custom Hooks\nReact comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you\u2019ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application\u2019s needs.\nuseState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own\nHow to reuse logic between components\nHow to name and structure your custom Hooks\nWhen and why to extract custom Hooks\nCustom Hooks: Sharing logic between components",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When and why to extract custom Hooks\nCustom Hooks: Sharing logic between components\nImagine you\u2019re developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you\u2019ll need two things in your component:\nA piece of state that tracks whether the network is online.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A piece of state that tracks whether the network is online.\nAn Effect that subscribes to the global online and offline events, and updates that state.\nonline\noffline\nThis will keep your component synchronized with the network status. You might start with something like this:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\nTry turning your network on and off, and notice how this StatusBar updates in response to your actions.\nStatusBar\nNow imagine you also want to use the same logic in a different component. You want to implement a Save button that will become disabled and show \u201cReconnecting\u2026\u201d instead of \u201cSave\u201d while the network is off.\nTo start, you can copy and paste the isOnline state and the Effect into SaveButton:\nisOnline\nSaveButton",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "isOnline\nSaveButton\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function SaveButton() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n \n );\n}\nVerify that, if you turn off the network, the button will change its appearance.\nThese two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different visual appearance, you want to reuse the logic between them.\nExtracting your own custom Hook from a component",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting your own custom Hook from a component\nImagine for a moment that, similar to useState and useEffect, there was a built-in useOnlineStatus Hook. Then both of these components could be simplified and you could remove the duplication between them:\nuseState\nuseEffect\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseEffect\nuseOnlineStatus\nfunction StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although there is no such built-in Hook, you can write it yourself. Declare a function called useOnlineStatus and move all the duplicated code into it from the components you wrote earlier:\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "At the end of the function, return isOnline. This lets your components read that value:\nisOnline\nimport { useOnlineStatus } from './useOnlineStatus.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() {\n const isOnline = useOnlineStatus();\n return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n\n function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }\n\n return (\n \n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n return (\n <>\n
Good morning, {firstName} {lastName}.
\n \n );\n}\nThere\u2019s some repetitive logic for each form field:\nThere\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "There\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName\nThere\u2019s a change handler (handleFirstNameChange and handleLastNameChange).\nhandleFirstNameChange\nhandleLastNameChange\nThere\u2019s a piece of JSX that specifies the value and onChange attributes for that input.\nvalue\nonChange\nYou can extract the repetitive logic into this useFormInput custom Hook:\nuseFormInput\nimport { useState } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useFormInput(initialValue) {\n const [value, setValue] = useState(initialValue);\n\n function handleChange(e) {\n setValue(e.target.value);\n }\n\n const inputProps = {\n value: value,\n onChange: handleChange\n };",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return inputProps;\n}\nNotice that it only declares one state variable called value.\nvalue\nHowever, the Form component calls useFormInput two times:\nForm\nuseFormInput\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nThis is why it works like declaring two separate state variables!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This is why it works like declaring two separate state variables!\nCustom Hooks let you share stateful logic but not state itself. Each call to a Hook is completely independent from every other call to the same Hook. This is why the two sandboxes above are completely equivalent. If you\u2019d like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When you need to share the state itself between multiple components, lift it up and pass it down instead.\nPassing reactive values between Hooks\nThe code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks need to be pure. Think of custom Hooks\u2019 code as part of your component\u2019s body!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room:\nimport { useState, useEffect } from 'react';\nimport { createConnection } from './chat.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useEffect(() => {\n const options = {\n serverUrl: serverUrl,\n roomId: roomId\n };\n const connection = createConnection(options);\n connection.on('message', (msg) => {\n showNotification('New message: ' + msg);\n });\n connection.connect();\n return () => connection.disconnect();\n }, [roomId, serverUrl]);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nWhen you change serverUrl or roomId, the Effect \u201creacts\u201d to your changes and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect\u2019s dependencies.\nserverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "serverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nThis lets your ChatRoom component call your custom Hook without worrying about how it works inside:\nChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}\nThis looks much simpler! (But it does the same thing.)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This looks much simpler! (But it does the same thing.)\nNotice that the logic still responds to prop and state changes. Try editing the server URL or the selected room:\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you\u2019re taking the return value of one Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...\nand passing it as an input to another Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Every time your ChatRoom component re-renders, it passes the latest roomId and serverUrl to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with audio or video processing software, chaining Hooks like this might remind you of chaining visual or audio effects. It\u2019s as if the output of useState \u201cfeeds into\u201d the input of the useChatRoom.)\nChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom\nPassing event handlers to custom Hooks\nUnder Construction\nThis section describes an experimental API that has not yet been released in a stable version of React.\nAs you start using useChatRoom in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nLet\u2019s say you want to move this logic back to your component:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s say you want to move this logic back to your component:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...\nTo make this work, change your custom Hook to take onReceiveMessage as one of its named options:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onReceiveMessage\nexport function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This will work, but there\u2019s one more improvement you can do when your custom Hook accepts event handlers.\nAdding a dependency on onReceiveMessage is not ideal because it will cause the chat to re-connect every time the component re-renders. Wrap this event handler into an Effect Event to remove it from the dependencies:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Now the chat won\u2019t re-connect every time that the ChatRoom component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:\nChatRoom\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl,\n onReceiveMessage(msg) {\n showNotification('New message: ' + msg);\n }\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you no longer need to know how useChatRoom works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That\u2019s the power of custom Hooks.\nuseChatRoom\nWhen to use custom Hooks",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nWhen to use custom Hooks\nYou don\u2019t need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a useFormInput Hook to wrap a single useState call like earlier is probably unnecessary.\nuseFormInput\nuseState",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useFormInput\nuseState\nHowever, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. You shouldn\u2019t need Effects very often, so if you\u2019re writing one, it means that you need to \u201cstep outside React\u201d to synchronize with some external system or to do something that React doesn\u2019t have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "For example, consider a ShippingForm component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although this code is quite repetitive, it\u2019s correct to keep these Effects separate from each other. They synchronize two different things, so you shouldn\u2019t merge them into one Effect. Instead, you can simplify the ShippingForm component above by extracting the common logic between them into your own useData Hook:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}\nNow you can replace both Effects in the ShippingForm components with calls to useData:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting a custom Hook makes the data flow explicit. You feed the url in and you get the data out. By \u201chiding\u201d your Effect inside useData, you also prevent someone working on the ShippingForm component from adding unnecessary dependencies to it. With time, most of your app\u2019s Effects will be in custom Hooks.\nurl\ndata\nuseData\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "url\ndata\nuseData\nShippingForm\nStart by choosing your custom Hook\u2019s name. If you struggle to pick a clear name, it might mean that your Effect is too coupled to the rest of your component\u2019s logic, and is not yet ready to be extracted.\nIdeally, your custom Hook\u2019s name should be clear enough that even a person who doesn\u2019t write code often could have a good guess about what your custom Hook does, what it takes, and what it returns:\n\u2705 useData(url)\nuseData(url)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "\u2705 useData(url)\nuseData(url)\n\u2705 useImpressionLog(eventName, extraData)\nuseImpressionLog(eventName, extraData)\n\u2705 useChatRoom(options)\nuseChatRoom(options)\nWhen you synchronize with an external system, your custom Hook name may be more technical and use jargon specific to that system. It\u2019s good as long as it would be clear to a person familiar with that system:\n\u2705 useMediaQuery(query)\nuseMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)\nuseIntersectionObserver(ref, options)\nKeep custom Hooks focused on concrete high-level use cases. Avoid creating and using custom \u201clifecycle\u201d Hooks that act as alternatives and convenience wrappers for the useEffect API itself:\nuseEffect\n\ud83d\udd34 useMount(fn)\nuseMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)\nFor example, this useMount Hook tries to ensure some code only runs \u201con mount\u201d:\nuseMount",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom \u201clifecycle\u201d Hooks like useMount don\u2019t fit well into the React paradigm. For example, this code example has a mistake (it doesn\u2019t \u201creact\u201d to roomId or serverUrl changes), but the linter won\u2019t warn you about it because the linter only checks direct useEffect calls. It won\u2019t know about your Hook.\nuseMount\nroomId\nserverUrl\nuseEffect\nIf you\u2019re writing an Effect, start by using the React API directly:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Then, you can (but don\u2019t have to) extract custom Hooks for different high-level use cases:\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A good custom Hook makes the calling code more declarative by constraining what it does. For example, useChatRoom(options) can only connect to the chat room, while useImpressionLog(eventName, extraData) can only send an impression log to the analytics. If your custom Hook API doesn\u2019t constrain the use cases and is very abstract, in the long run it\u2019s likely to introduce more problems than it solves.\nuseChatRoom(options)\nuseImpressionLog(eventName, extraData)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom(options)\nuseImpressionLog(eventName, extraData)\nCustom Hooks help you migrate to better patterns",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom Hooks help you migrate to better patterns\nEffects are an \u201cescape hatch\u201d: you use them when you need to \u201cstep outside React\u201d and when there is no better built-in solution for your use case. With time, the React team\u2019s goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping your Effects in custom Hooks makes it easier to upgrade your code when these solutions become available.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s return to this example:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "window.removeEventListener('offline', handleOffline);\n };\n }, []);\n return isOnline;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "In the above example, useOnlineStatus is implemented with a pair of useState and useEffect. However, this isn\u2019t the best possible solution. There is a number of edge cases it doesn\u2019t consider. For example, it assumes that when the component mounts, isOnline is already true, but this may be wrong if the network already went offline. You can use the browser navigator.onLine API to check for that, but using it directly would not work on the server for generating the initial HTML. In short, this",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "but using it directly would not work on the server for generating the initial HTML. In short, this code could be improved.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useOnlineStatus\nuseState\nuseEffect\nisOnline\ntrue\nnavigator.onLine\nReact includes a dedicated API called useSyncExternalStore which takes care of all of these problems for you. Here is your useOnlineStatus Hook, rewritten to take advantage of this new API:\nuseSyncExternalStore\nuseOnlineStatus\nimport { useSyncExternalStore } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function subscribe(callback) {\n window.addEventListener('online', callback);\n window.addEventListener('offline', callback);\n return () => {\n window.removeEventListener('online', callback);\n window.removeEventListener('offline', callback);\n };\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n return useSyncExternalStore(\n subscribe,\n () => navigator.onLine, // How to get the value on the client\n () => true // How to get the value on the server\n );\n}\nNotice how you didn\u2019t need to change any of the components to make this migration:\nfunction StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}\nThis is another reason for why wrapping Effects in custom Hooks is often beneficial:\nYou make the data flow to and from your Effects very explicit.\nYou let your components focus on the intent rather than on the exact implementation of your Effects.\nWhen React adds new features, you can remove those Effects without changing any of your components.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When React adds new features, you can remove those Effects without changing any of your components.\nSimilar to a design system, you might find it helpful to start extracting common idioms from your app\u2019s components into custom Hooks. This will keep your components\u2019 code focused on the intent, and let you avoid writing raw Effects very often. Many excellent custom Hooks are maintained by the React community.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "We\u2019re still working out the details, but we expect that in the future, you\u2019ll write data fetching like this:\nimport { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "If you use custom Hooks like useData above in your app, it will require fewer changes to migrate to the eventually recommended approach than if you write raw Effects in every component manually. However, the old approach will still work fine, so if you feel happy writing raw Effects, you can continue to do that.\nuseData\nThere is more than one way to do it",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useData\nThere is more than one way to do it\nLet\u2019s say you want to implement a fade-in animation from scratch using the browser requestAnimationFrame API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you hold in a ref until it reaches 1. Your code might start like this:\nrequestAnimationFrame\n1\nimport { useState, useEffect, useRef } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function Welcome() {\n const ref = useRef(null);\n\n useEffect(() => {\n const duration = 1000;\n const node = ref.current;\n\n let startTime = performance.now();\n let frameId = null;\n\n function onFrame(now) {\n const timePassed = now - startTime;\n const progress = Math.min(timePassed / duration, 1);\n onProgress(progress);\n if (progress < 1) {\n // We still have more frames to paint\n frameId = requestAnimationFrame(onFrame);\n }\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function onProgress(progress) {\n node.style.opacity = progress;\n }\n\n function start() {\n onProgress(0);\n startTime = performance.now();\n frameId = requestAnimationFrame(onFrame);\n }\n\n function stop() {\n cancelAnimationFrame(frameId);\n startTime = null;\n frameId = null;\n }\n\n start();\n return () => stop();\n }, []);\n\n return (\n \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && Seconds passed: {count}
;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() { const count = useCounter(); return Seconds passed: {count}
;}\nYou\u2019ll need to write your custom Hook in useCounter.js and import it into the App.js file.\nuseCounter.js\nApp.js\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(c => c + 1);\n }, 1000);\n return () => clearInterval(id);\n }, []);\n return Seconds passed: {count}
;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Thinking in React\nReact can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we\u2019ll guide you through the thought process of building a searchable product data table with React.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Start with the mockup\nImagine that you already have a JSON API and a mockup from a designer.\nThe JSON API returns some data that looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The JSON API returns some data that looks like this:\n[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]\nThe mockup looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The mockup looks like this:\nTo implement a UI in React, you will usually follow the same five steps.\nStep 1: Break the UI into a component hierarchy\nStart by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them!\nDepending on your background, you can think about splitting up a design into components in different ways:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Programming\u2014use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.\nCSS\u2014consider what you would make class selectors for. (However, components are a bit less granular.)\nDesign\u2014consider how you would organize the design\u2019s layers.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Design\u2014consider how you would organize the design\u2019s layers.\nIf your JSON is well-structured, you\u2019ll often find that it naturally maps to the component structure of your UI. That\u2019s because UI and data models often have the same information architecture\u2014that is, the same shape. Separate your UI into components, where each component matches one piece of your data model.\nThere are five components on this screen:\nFilterableProductTable (grey) contains the entire app.\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "FilterableProductTable (grey) contains the entire app.\nFilterableProductTable\nSearchBar (blue) receives the user input.\nSearchBar\nProductTable (lavender) displays and filters the list according to the user input.\nProductTable\nProductCategoryRow (green) displays a heading for each category.\nProductCategoryRow\nProductRow\t(yellow) displays a row for each product.\nProductRow",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\t(yellow) displays a row for each product.\nProductRow\nIf you look at ProductTable (lavender), you\u2019ll see that the table header (containing the \u201cName\u201d and \u201cPrice\u201d labels) isn\u2019t its own component. This is a matter of preference, and you could go either way. For this example, it is a part of ProductTable because it appears inside the ProductTable\u2019s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own ProductTableHeader component.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductTable\nProductTable\nProductTable\nProductTableHeader\nNow that you\u2019ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "SearchBar\nProductTable\n\nProductCategoryRow\nProductRow\nFilterableProductTable\nSearchBar\nSearchBar\nProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductCategoryRow\nProductRow\nProductTable\nProductCategoryRow\nProductCategoryRow\nProductRow\nProductRow\nStep 2: Build a static version in React",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\nStep 2: Build a static version in React\nNow that you have your component hierarchy, it\u2019s time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity\u2026 yet! It\u2019s often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "To build a static version of your app that renders your data model, you\u2019ll want to build components that reuse other components and pass data using props. Props are a way of passing data from parent to child. (If you\u2019re familiar with the concept of state, don\u2019t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don\u2019t need it.)",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "You can either build \u201ctop down\u201d by starting with building the components higher up in the hierarchy (like FilterableProductTable) or \u201cbottom up\u201d by working from components lower down (like ProductRow). In simpler examples, it\u2019s usually easier to go top-down, and on larger projects, it\u2019s easier to go bottom-up.\nFilterableProductTable\nProductRow\nfunction ProductCategoryRow({ category }) {\n return (\n \n \n {category}\n \n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;\n\n products.forEach((product) => {\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}\n\nfunction SearchBar() {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function FilterableProductTable({ products }) {\n return (\n \n \n \n {category}\n \n \n );\n}\n\nfunction ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products, filterText, inStockOnly }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "products.forEach((product) => {\n if (\n product.name.toLowerCase().indexOf(\n filterText.toLowerCase()\n ) === -1\n ) {\n return;\n }\n if (inStockOnly && !product.stocked) {\n return;\n }\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function SearchBar({ filterText, inStockOnly }) {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "const PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "export default function App() {\n return \n {walk ? 'Walk' : 'Stop'}\n
\n \n );\n}\nAdd an alert to the click handler. When the light is green and says \u201cWalk\u201d, clicking the button should say \u201cStop is next\u201d. When the light is red and says \u201cStop\u201d, clicking the button should say \u201cWalk is next\u201d.\nalert",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "alert\nDoes it make a difference whether you put the alert before or after the setWalk call?\nalert\nsetWalk",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "Sharing State Between Components\nSometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as lifting state up, and it\u2019s one of the most common things you will do writing React code.\nYou will learn\nHow to share state between components by lifting it up\nWhat are controlled and uncontrolled components\nLifting state up by example",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "What are controlled and uncontrolled components\nLifting state up by example\nIn this example, a parent Accordion component renders two separate Panels:\nAccordion\nPanel\nAccordion",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nEach Panel component has a boolean isActive state that determines whether its content is visible.\nPanel\nisActive\nPress the Show button for both panels:\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children }) {\n const [isActive, setIsActive] = useState(false);\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "\n \n );\n}\nNotice how pressing one panel\u2019s button does not affect the other panel\u2014they are independent.\nInitially, each Panel\u2019s isActive state is false, so they both appear collapsed\nPanel\nisActive\nfalse\nClicking either Panel\u2019s button will only update that Panel\u2019s isActive state alone\nPanel\nPanel\nisActive",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nisActive\nBut now let\u2019s say you want to change it so that only one panel is expanded at any given time. With that design, expanding the second panel should collapse the first one. How would you do that?\nTo coordinate these two panels, you need to \u201clift their state up\u201d to a parent component in three steps:\nRemove state from the child components.\nPass hardcoded data from the common parent.\nAdd state to the common parent and pass it down together with the event handlers.",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Add state to the common parent and pass it down together with the event handlers.\nThis will allow the Accordion component to coordinate both Panels and only expand one at a time.\nAccordion\nPanel\nStep 1: Remove state from the child components\nYou will give control of the Panel\u2019s isActive to its parent component. This means that the parent component will pass isActive to Panel as a prop instead. Start by removing this line from the Panel component:\nPanel\nisActive\nisActive\nPanel\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nisActive\nPanel\nPanel\nconst [isActive, setIsActive] = useState(false);\nconst [isActive, setIsActive] = useState(false);\nAnd instead, add isActive to the Panel\u2019s list of props:\nisActive\nPanel\nfunction Panel({ title, children, isActive }) {\nfunction Panel({ title, children, isActive }) {\nNow the Panel\u2019s parent component can control isActive by passing it down as a prop. Conversely, the Panel component now has no control over the value of isActive\u2014it\u2019s now up to the parent component!",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nPanel\nisActive\nStep 2: Pass hardcoded data from the common parent\nTo lift state up, you must locate the closest common parent component of both of the child components that you want to coordinate:\nAccordion (closest common parent)",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nIn this example, it\u2019s the Accordion component. Since it\u2019s above both panels and can control their props, it will become the \u201csource of truth\u201d for which panel is currently active. Make the Accordion component pass a hardcoded value of isActive (for example, true) to both panels:\nAccordion\nAccordion\nisActive\ntrue\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children, isActive }) {\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}\nTry editing the hardcoded isActive values in the Accordion component and see the result on the screen.\nisActive\nAccordion\nStep 3: Add state to the common parent",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "isActive\nAccordion\nStep 3: Add state to the common parent\nLifting state up often changes the nature of what you\u2019re storing as state.\nIn this case, only one panel should be active at a time. This means that the Accordion common parent component needs to keep track of which panel is the active one. Instead of a boolean value, it could use a number as the index of the active Panel for the state variable:\nAccordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Accordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);\nconst [activeIndex, setActiveIndex] = useState(0);\nWhen the activeIndex is 0, the first panel is active, and when it\u2019s 1, it\u2019s the second one.\nactiveIndex\n0\n1",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "activeIndex\n0\n1\nClicking the \u201cShow\u201d button in either Panel needs to change the active index in Accordion. A Panel can\u2019t set the activeIndex state directly because it\u2019s defined inside the Accordion. The Accordion component needs to explicitly allow the Panel component to change its state by passing an event handler down as a prop:\nPanel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel\n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... \n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "The
\nJust like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you\u2019re reading is made out of React components:\n ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " ",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ![]()
tag with src and alt attributes. ![]()
is written like HTML, but it is actually JavaScript under the hood! This syntax is called JSX, and it lets you embed markup inside JavaScript.\n![]()
\nsrc\nalt\n![]()
\nReturn statements can be written all on one line, as in this component:\nreturn ;\nreturn ;",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "return ;\nBut if your markup isn\u2019t all on the same line as the return keyword, you must wrap it in a pair of parentheses:\nreturn\nreturn ( );\nreturn ( );\nPitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Pitfall\nWithout parentheses, any code on the lines after return will be ignored!\nreturn\nUsing a component\nNow that you\u2019ve defined your Profile component, you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:\nProfile\nGallery\nProfile\nfunction Profile() {\n return (\n \n Amazing scientists
\n \n );\n}\nWhat the browser sees\nNotice the difference in casing:\n is lowercase, so React knows we refer to an HTML tag.\n\n![]()
. In the end, this is what the browser sees:\nProfile\n![]()
\n Amazing scientists
",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": " Amazing scientists
\nNesting and organizing components",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Nesting and organizing components\nComponents are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move Profile to a separate file. You will learn how to do this shortly on the page about imports.\nProfile",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nBecause the Profile components are rendered inside Gallery\u2014even several times!\u2014we can say that Gallery is a parent component, rendering each Profile as a \u201cchild\u201d. This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.\nProfile\nGallery\nGallery\nProfile\nPitfall\nComponents can render other components, but you must never nest their definitions:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Profile\nPitfall\nComponents can render other components, but you must never nest their definitions:\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nexport default function Gallery() { // \ud83d\udd34 Never define a component inside another component! function Profile() { // ... } // ...}\nThe snippet above is very slow and causes bugs. Instead, define every component at the top level:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "The snippet above is very slow and causes bugs. Instead, define every component at the top level:\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nexport default function Gallery() { // ...}// \u2705 Declare components at the top levelfunction Profile() { // ...}\nWhen a child component needs some data from a parent, pass it by props instead of nesting definitions.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Your React application begins at a \u201croot\u201d component. Usually, it is created automatically when you start a new project. For example, if you use CodeSandbox or if you use the framework Next.js, the root component is defined in pages/index.js. In these examples, you\u2019ve been exporting root components.\npages/index.js",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "pages/index.js\nMost React apps use components all the way down. This means that you won\u2019t only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "React-based frameworks take this a step further. Instead of using an empty HTML file and letting React \u201ctake over\u201d managing the page with JavaScript, they also generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Still, many websites only use React to add interactivity to existing HTML pages. They have many root components instead of a single one for the entire page. You can use as much\u2014or as little\u2014React as you need.\nRecap\nYou\u2019ve just gotten your first taste of React! Let\u2019s recap some key points.\nReact lets you create components, reusable UI elements for your app.\nReact lets you create components, reusable UI elements for your app.\nIn a React app, every piece of UI is a component.",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "In a React app, every piece of UI is a component.\nIn a React app, every piece of UI is a component.\nReact components are regular JavaScript functions except:",
+ "title": "Your First Component \u2013 React",
+ "url": "https://react.dev/learn/your-first-component"
+ },
+ {
+ "content": "Their names always begin with a capital letter.\nThey return JSX markup.\nReact components are regular JavaScript functions except:\nTheir names always begin with a capital letter.\nThey return JSX markup.\nTry out some challenges\nThis sandbox doesn\u2019t work because the root component is not exported:\nfunction Profile() {\n return (\n Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\nAnd you want to put it into your component:\nexport default function TodoList() { return ( // ??? )}\nexport default function TodoList() { return ( // ??? )}\nIf you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you copy and paste it as is, it will not work:\nexport default function TodoList() {\n return (\n // This doesn't quite work!\n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights\n
- Rehearse a movie scene\n
- Improve the spectrum technology\n
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "- Rehearse a movie scene\n
- Improve the spectrum technology\n \nThis is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they\u2019ll guide you to fix the markup, or you can follow the guide below.\nNote\nMost of the time, React\u2019s on-screen error messages will help you find where the problem is. Give them a read if you get stuck!\nThe Rules of JSX\n1. Return a single root element",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "The Rules of JSX\n1. Return a single root element\nTo return multiple elements from a component, wrap them with a single parent tag.\nFor example, you can use a :\n\n
Hedy Lamarr's Todos
...
\n Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you don\u2019t want to add an extra to your markup, you can write <> and instead:\n\n<>\n\n<> Hedy Lamarr's Todos
...
\n<> Hedy Lamarr's Todos
...
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "This empty tag is called a Fragment. Fragments let you group things without leaving any trace in the browser HTML tree.\nJSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can\u2019t return two objects from a function without wrapping them into an array. This explains why you also can\u2019t return two JSX tags without wrapping them into another tag or a Fragment.\n2. Close all the tags",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "2. Close all the tags\nJSX requires tags to be explicitly closed: self-closing tags like ![]()
must become ![]()
, and wrapping tags like - oranges must be written as
- oranges
.\n![]()
\n![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:\n<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "<> - Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\n3. camelCase all most of the things!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "3. camelCase all most of the things!\nJSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can\u2019t contain dashes or be reserved words like class.\nclass",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "class\nThis is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of stroke-width you use strokeWidth. Since class is a reserved word, in React you write className instead, named after the corresponding DOM property:\nstroke-width\nstrokeWidth\nclass\nclassName\n\n",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "\nYou can find all these attributes in the list of DOM component props. If you get one wrong, don\u2019t worry\u2014React will print a message with a possible correction to the browser console.\nPitfall\nFor historical reasons, aria-* and data-* attributes are written as in HTML with dashes.\naria-*\ndata-*\nPro-tip: Use a JSX Converter",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "aria-*\ndata-*\nPro-tip: Use a JSX Converter\nConverting all these attributes in existing markup can be tedious! We recommend using a converter to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it\u2019s still worth understanding what is going on so that you can comfortably write JSX on your own.\nHere is your final result:\nexport default function TodoList() {\n return (\n <>\n Hedy Lamarr's Todos
\n \n Hedy Lamarr's Todos
\n \n \n - Invent new traffic lights
\n - Rehearse a movie scene
\n - Improve the spectrum technology
\n
\n \n );\n}\nRecap\nNow you know why JSX exists and how to use it in components:\nReact components group rendering logic together with markup because they are related.",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "React components group rendering logic together with markup because they are related.\nJSX is similar to HTML, with a few differences. You can use a converter if you need to.\nError messages will often point you in the right direction to fixing your markup.\nTry out some challenges\nThis HTML was pasted into a component, but it\u2019s not valid JSX. Fix it:\nexport default function Bio() {\n return (\n \n Welcome to my website!
\n \n ",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "
\n Welcome to my website!
\n \n \n You can find my thoughts here.\n
\n And pictures of scientists!\n
\n );\n}\nWhether to do it by hand or using the converter is up to you!",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "Keeping Components Pure\nSome JavaScript functions are pure. Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow.\nYou will learn\nWhat purity is and how it helps you avoid bugs\nHow to keep components pure by keeping changes out of the render phase",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "How to keep components pure by keeping changes out of the render phase\nHow to use Strict Mode to find mistakes in your components\nPurity: Components as formulas\nIn computer science (and especially the world of functional programming), a pure function is a function with the following characteristics:\nIt minds its own business. It does not change any objects or variables that existed before it was called.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Same inputs, same output. Given the same inputs, a pure function should always return the same result.\nYou might already be familiar with one example of pure functions: formulas in math.\nConsider this math formula: y = 2x.\nIf x = 2 then y = 4. Always.\nIf x = 3 then y = 6. Always.\nIf x = 3, y won\u2019t sometimes be 9 or \u20131 or 2.5 depending on the time of day or the state of the stock market.\nIf y = 2x and x = 3, y will always be 6.\nIf we made this into a JavaScript function, it would look like this:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "If we made this into a JavaScript function, it would look like this:\nfunction double(number) { return 2 * number;}\nfunction double(number) { return 2 * number;}\nIn the above example, double is a pure function. If you pass it 3, it will return 6. Always.\ndouble\n3\n6\nReact is designed around this concept. React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs:",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Recipe({ drinkers }) {\n return (\n \n - Boil {drinkers} cups of water.
\n - Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.
\n - Add {0.5 * drinkers} cups of milk to boil and sugar to taste.
\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function App() {\n return (\n \n Spiced Chai Recipe
\n For two
\n For a gathering
\n \n );\n}\nWhen you pass drinkers={2} to Recipe, it will return JSX containing 2 cups of water. Always.\ndrinkers={2}\nRecipe\n2 cups of water\nIf you pass drinkers={4}, it will return JSX containing 4 cups of water. Always.\ndrinkers={4}\n4 cups of water\nJust like a math formula.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "drinkers={4}\n4 cups of water\nJust like a math formula.\nYou could think of your components as recipes: if you follow them and don\u2019t introduce new ingredients during the cooking process, you will get the same dish every time. That \u201cdish\u201d is the JSX that the component serves to React to render.\nIllustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Illustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences\nReact\u2019s rendering process must always be pure. Components should only return their JSX, and not change any objects or variables that existed before rendering\u2014that would make them impure!\nHere is a component that breaks this rule:\nlet guest = 0;",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Cup() {\n // Bad: changing a preexisting variable!\n guest = guest + 1;\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaSet() {\n return (\n <>\n . Some frameworks do this by default.\n\nLocal mutation: Your component\u2019s little secret",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "\nLocal mutation: Your component\u2019s little secret\nIn the above example, the problem was that the component changed a preexisting variable while rendering. This is often called a \u201cmutation\u201d to make it sound a bit scarier. Pure functions don\u2019t mutate variables outside of the function\u2019s scope or objects that were created before the call\u2014that makes them impure!",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "However, it\u2019s completely fine to change variables and objects that you\u2019ve just created while rendering. In this example, you create an [] array, assign it to a cups variable, and then push a dozen cups into it:\n[]\ncups\npush\nfunction Cup({ guest }) {\n return Tea cup for guest #{guest}
;\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function TeaGathering() {\n const cups = [];\n for (let i = 1; i <= 12; i++) {\n cups.push(\u2019s CSS class to \"night\" during the time from midnight to six hours in the morning, and \"day\" at all other times. However, it doesn\u2019t work. Can you fix this component?\n\n\"night\"\n\"day\"\nYou can verify whether your solution works by temporarily changing the computer\u2019s timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!\nexport default function Clock({ time }) {",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function Clock({ time }) {\n const hours = time.getHours();\n if (hours >= 0 && hours <= 6) {\n document.getElementById('time').className = 'night';\n } else {\n document.getElementById('time').className = 'day';\n }\n return (\n \n {time.toLocaleTimeString()}\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Reusing Logic with Custom Hooks\nReact comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you\u2019ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application\u2019s needs.\nuseState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own\nHow to reuse logic between components\nHow to name and structure your custom Hooks\nWhen and why to extract custom Hooks\nCustom Hooks: Sharing logic between components",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When and why to extract custom Hooks\nCustom Hooks: Sharing logic between components\nImagine you\u2019re developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you\u2019ll need two things in your component:\nA piece of state that tracks whether the network is online.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A piece of state that tracks whether the network is online.\nAn Effect that subscribes to the global online and offline events, and updates that state.\nonline\noffline\nThis will keep your component synchronized with the network status. You might start with something like this:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\nTry turning your network on and off, and notice how this StatusBar updates in response to your actions.\nStatusBar\nNow imagine you also want to use the same logic in a different component. You want to implement a Save button that will become disabled and show \u201cReconnecting\u2026\u201d instead of \u201cSave\u201d while the network is off.\nTo start, you can copy and paste the isOnline state and the Effect into SaveButton:\nisOnline\nSaveButton",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "isOnline\nSaveButton\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function SaveButton() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n \n );\n}\nVerify that, if you turn off the network, the button will change its appearance.\nThese two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different visual appearance, you want to reuse the logic between them.\nExtracting your own custom Hook from a component",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting your own custom Hook from a component\nImagine for a moment that, similar to useState and useEffect, there was a built-in useOnlineStatus Hook. Then both of these components could be simplified and you could remove the duplication between them:\nuseState\nuseEffect\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseEffect\nuseOnlineStatus\nfunction StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although there is no such built-in Hook, you can write it yourself. Declare a function called useOnlineStatus and move all the duplicated code into it from the components you wrote earlier:\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "At the end of the function, return isOnline. This lets your components read that value:\nisOnline\nimport { useOnlineStatus } from './useOnlineStatus.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() {\n const isOnline = useOnlineStatus();\n return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n\n function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }\n\n return (\n \n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n return (\n <>\n
Good morning, {firstName} {lastName}.
\n \n );\n}\nThere\u2019s some repetitive logic for each form field:\nThere\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "There\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName\nThere\u2019s a change handler (handleFirstNameChange and handleLastNameChange).\nhandleFirstNameChange\nhandleLastNameChange\nThere\u2019s a piece of JSX that specifies the value and onChange attributes for that input.\nvalue\nonChange\nYou can extract the repetitive logic into this useFormInput custom Hook:\nuseFormInput\nimport { useState } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useFormInput(initialValue) {\n const [value, setValue] = useState(initialValue);\n\n function handleChange(e) {\n setValue(e.target.value);\n }\n\n const inputProps = {\n value: value,\n onChange: handleChange\n };",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return inputProps;\n}\nNotice that it only declares one state variable called value.\nvalue\nHowever, the Form component calls useFormInput two times:\nForm\nuseFormInput\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nThis is why it works like declaring two separate state variables!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This is why it works like declaring two separate state variables!\nCustom Hooks let you share stateful logic but not state itself. Each call to a Hook is completely independent from every other call to the same Hook. This is why the two sandboxes above are completely equivalent. If you\u2019d like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When you need to share the state itself between multiple components, lift it up and pass it down instead.\nPassing reactive values between Hooks\nThe code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks need to be pure. Think of custom Hooks\u2019 code as part of your component\u2019s body!",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room:\nimport { useState, useEffect } from 'react';\nimport { createConnection } from './chat.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useEffect(() => {\n const options = {\n serverUrl: serverUrl,\n roomId: roomId\n };\n const connection = createConnection(options);\n connection.on('message', (msg) => {\n showNotification('New message: ' + msg);\n });\n connection.connect();\n return () => connection.disconnect();\n }, [roomId, serverUrl]);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nWhen you change serverUrl or roomId, the Effect \u201creacts\u201d to your changes and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect\u2019s dependencies.\nserverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "serverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nThis lets your ChatRoom component call your custom Hook without worrying about how it works inside:\nChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <> Welcome to the {roomId} room!
);}\nThis looks much simpler! (But it does the same thing.)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This looks much simpler! (But it does the same thing.)\nNotice that the logic still responds to prop and state changes. Try editing the server URL or the selected room:\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you\u2019re taking the return value of one Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...\nand passing it as an input to another Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Every time your ChatRoom component re-renders, it passes the latest roomId and serverUrl to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with audio or video processing software, chaining Hooks like this might remind you of chaining visual or audio effects. It\u2019s as if the output of useState \u201cfeeds into\u201d the input of the useChatRoom.)\nChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom\nPassing event handlers to custom Hooks\nUnder Construction\nThis section describes an experimental API that has not yet been released in a stable version of React.\nAs you start using useChatRoom in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:\nuseChatRoom",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nLet\u2019s say you want to move this logic back to your component:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s say you want to move this logic back to your component:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...\nTo make this work, change your custom Hook to take onReceiveMessage as one of its named options:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onReceiveMessage\nexport function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "This will work, but there\u2019s one more improvement you can do when your custom Hook accepts event handlers.\nAdding a dependency on onReceiveMessage is not ideal because it will cause the chat to re-connect every time the component re-renders. Wrap this event handler into an Effect Event to remove it from the dependencies:\nonReceiveMessage",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Now the chat won\u2019t re-connect every time that the ChatRoom component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:\nChatRoom\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';\nimport { showNotification } from './notifications.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl,\n onReceiveMessage(msg) {\n showNotification('New message: ' + msg);\n }\n });",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n <>\n \n Welcome to the {roomId} room!
\n \n );\n}\nNotice how you no longer need to know how useChatRoom works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That\u2019s the power of custom Hooks.\nuseChatRoom\nWhen to use custom Hooks",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom\nWhen to use custom Hooks\nYou don\u2019t need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a useFormInput Hook to wrap a single useState call like earlier is probably unnecessary.\nuseFormInput\nuseState",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useFormInput\nuseState\nHowever, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. You shouldn\u2019t need Effects very often, so if you\u2019re writing one, it means that you need to \u201cstep outside React\u201d to synchronize with some external system or to do something that React doesn\u2019t have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "For example, consider a ShippingForm component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although this code is quite repetitive, it\u2019s correct to keep these Effects separate from each other. They synchronize two different things, so you shouldn\u2019t merge them into one Effect. Instead, you can simplify the ShippingForm component above by extracting the common logic between them into your own useData Hook:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}\nNow you can replace both Effects in the ShippingForm components with calls to useData:\nShippingForm\nuseData",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "ShippingForm\nuseData\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting a custom Hook makes the data flow explicit. You feed the url in and you get the data out. By \u201chiding\u201d your Effect inside useData, you also prevent someone working on the ShippingForm component from adding unnecessary dependencies to it. With time, most of your app\u2019s Effects will be in custom Hooks.\nurl\ndata\nuseData\nShippingForm",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "url\ndata\nuseData\nShippingForm\nStart by choosing your custom Hook\u2019s name. If you struggle to pick a clear name, it might mean that your Effect is too coupled to the rest of your component\u2019s logic, and is not yet ready to be extracted.\nIdeally, your custom Hook\u2019s name should be clear enough that even a person who doesn\u2019t write code often could have a good guess about what your custom Hook does, what it takes, and what it returns:\n\u2705 useData(url)\nuseData(url)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "\u2705 useData(url)\nuseData(url)\n\u2705 useImpressionLog(eventName, extraData)\nuseImpressionLog(eventName, extraData)\n\u2705 useChatRoom(options)\nuseChatRoom(options)\nWhen you synchronize with an external system, your custom Hook name may be more technical and use jargon specific to that system. It\u2019s good as long as it would be clear to a person familiar with that system:\n\u2705 useMediaQuery(query)\nuseMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)\nuseIntersectionObserver(ref, options)\nKeep custom Hooks focused on concrete high-level use cases. Avoid creating and using custom \u201clifecycle\u201d Hooks that act as alternatives and convenience wrappers for the useEffect API itself:\nuseEffect\n\ud83d\udd34 useMount(fn)\nuseMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)\nFor example, this useMount Hook tries to ensure some code only runs \u201con mount\u201d:\nuseMount",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useMount\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom \u201clifecycle\u201d Hooks like useMount don\u2019t fit well into the React paradigm. For example, this code example has a mistake (it doesn\u2019t \u201creact\u201d to roomId or serverUrl changes), but the linter won\u2019t warn you about it because the linter only checks direct useEffect calls. It won\u2019t know about your Hook.\nuseMount\nroomId\nserverUrl\nuseEffect\nIf you\u2019re writing an Effect, start by using the React API directly:",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Then, you can (but don\u2019t have to) extract custom Hooks for different high-level use cases:\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A good custom Hook makes the calling code more declarative by constraining what it does. For example, useChatRoom(options) can only connect to the chat room, while useImpressionLog(eventName, extraData) can only send an impression log to the analytics. If your custom Hook API doesn\u2019t constrain the use cases and is very abstract, in the long run it\u2019s likely to introduce more problems than it solves.\nuseChatRoom(options)\nuseImpressionLog(eventName, extraData)",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useChatRoom(options)\nuseImpressionLog(eventName, extraData)\nCustom Hooks help you migrate to better patterns",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Custom Hooks help you migrate to better patterns\nEffects are an \u201cescape hatch\u201d: you use them when you need to \u201cstep outside React\u201d and when there is no better built-in solution for your use case. With time, the React team\u2019s goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping your Effects in custom Hooks makes it easier to upgrade your code when these solutions become available.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Let\u2019s return to this example:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "window.removeEventListener('offline', handleOffline);\n };\n }, []);\n return isOnline;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "In the above example, useOnlineStatus is implemented with a pair of useState and useEffect. However, this isn\u2019t the best possible solution. There is a number of edge cases it doesn\u2019t consider. For example, it assumes that when the component mounts, isOnline is already true, but this may be wrong if the network already went offline. You can use the browser navigator.onLine API to check for that, but using it directly would not work on the server for generating the initial HTML. In short, this",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "but using it directly would not work on the server for generating the initial HTML. In short, this code could be improved.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useOnlineStatus\nuseState\nuseEffect\nisOnline\ntrue\nnavigator.onLine\nReact includes a dedicated API called useSyncExternalStore which takes care of all of these problems for you. Here is your useOnlineStatus Hook, rewritten to take advantage of this new API:\nuseSyncExternalStore\nuseOnlineStatus\nimport { useSyncExternalStore } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function subscribe(callback) {\n window.addEventListener('online', callback);\n window.addEventListener('offline', callback);\n return () => {\n window.removeEventListener('online', callback);\n window.removeEventListener('offline', callback);\n };\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export function useOnlineStatus() {\n return useSyncExternalStore(\n subscribe,\n () => navigator.onLine, // How to get the value on the client\n () => true // How to get the value on the server\n );\n}\nNotice how you didn\u2019t need to change any of the components to make this migration:\nfunction StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}\nThis is another reason for why wrapping Effects in custom Hooks is often beneficial:\nYou make the data flow to and from your Effects very explicit.\nYou let your components focus on the intent rather than on the exact implementation of your Effects.\nWhen React adds new features, you can remove those Effects without changing any of your components.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When React adds new features, you can remove those Effects without changing any of your components.\nSimilar to a design system, you might find it helpful to start extracting common idioms from your app\u2019s components into custom Hooks. This will keep your components\u2019 code focused on the intent, and let you avoid writing raw Effects very often. Many excellent custom Hooks are maintained by the React community.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "We\u2019re still working out the details, but we expect that in the future, you\u2019ll write data fetching like this:\nimport { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "import { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "If you use custom Hooks like useData above in your app, it will require fewer changes to migrate to the eventually recommended approach than if you write raw Effects in every component manually. However, the old approach will still work fine, so if you feel happy writing raw Effects, you can continue to do that.\nuseData\nThere is more than one way to do it",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useData\nThere is more than one way to do it\nLet\u2019s say you want to implement a fade-in animation from scratch using the browser requestAnimationFrame API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you hold in a ref until it reaches 1. Your code might start like this:\nrequestAnimationFrame\n1\nimport { useState, useEffect, useRef } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function Welcome() {\n const ref = useRef(null);\n\n useEffect(() => {\n const duration = 1000;\n const node = ref.current;\n\n let startTime = performance.now();\n let frameId = null;\n\n function onFrame(now) {\n const timePassed = now - startTime;\n const progress = Math.min(timePassed / duration, 1);\n onProgress(progress);\n if (progress < 1) {\n // We still have more frames to paint\n frameId = requestAnimationFrame(onFrame);\n }\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function onProgress(progress) {\n node.style.opacity = progress;\n }\n\n function start() {\n onProgress(0);\n startTime = performance.now();\n frameId = requestAnimationFrame(onFrame);\n }\n\n function stop() {\n cancelAnimationFrame(frameId);\n startTime = null;\n frameId = null;\n }\n\n start();\n return () => stop();\n }, []);\n\n return (\n \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && \n Welcome\n
\n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n
\n {show && Seconds passed: {count}
;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() { const count = useCounter(); return Seconds passed: {count}
;}\nYou\u2019ll need to write your custom Hook in useCounter.js and import it into the App.js file.\nuseCounter.js\nApp.js\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(c => c + 1);\n }, 1000);\n return () => clearInterval(id);\n }, []);\n return Seconds passed: {count}
;\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Thinking in React\nReact can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we\u2019ll guide you through the thought process of building a searchable product data table with React.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Start with the mockup\nImagine that you already have a JSON API and a mockup from a designer.\nThe JSON API returns some data that looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The JSON API returns some data that looks like this:\n[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]\nThe mockup looks like this:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "The mockup looks like this:\nTo implement a UI in React, you will usually follow the same five steps.\nStep 1: Break the UI into a component hierarchy\nStart by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them!\nDepending on your background, you can think about splitting up a design into components in different ways:",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Programming\u2014use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.\nCSS\u2014consider what you would make class selectors for. (However, components are a bit less granular.)\nDesign\u2014consider how you would organize the design\u2019s layers.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "Design\u2014consider how you would organize the design\u2019s layers.\nIf your JSON is well-structured, you\u2019ll often find that it naturally maps to the component structure of your UI. That\u2019s because UI and data models often have the same information architecture\u2014that is, the same shape. Separate your UI into components, where each component matches one piece of your data model.\nThere are five components on this screen:\nFilterableProductTable (grey) contains the entire app.\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "FilterableProductTable (grey) contains the entire app.\nFilterableProductTable\nSearchBar (blue) receives the user input.\nSearchBar\nProductTable (lavender) displays and filters the list according to the user input.\nProductTable\nProductCategoryRow (green) displays a heading for each category.\nProductCategoryRow\nProductRow\t(yellow) displays a row for each product.\nProductRow",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\t(yellow) displays a row for each product.\nProductRow\nIf you look at ProductTable (lavender), you\u2019ll see that the table header (containing the \u201cName\u201d and \u201cPrice\u201d labels) isn\u2019t its own component. This is a matter of preference, and you could go either way. For this example, it is a part of ProductTable because it appears inside the ProductTable\u2019s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own ProductTableHeader component.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductTable\nProductTable\nProductTable\nProductTableHeader\nNow that you\u2019ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:\nFilterableProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "SearchBar\nProductTable\n\nProductCategoryRow\nProductRow\nFilterableProductTable\nSearchBar\nSearchBar\nProductTable",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductCategoryRow\nProductRow\nProductTable\nProductCategoryRow\nProductCategoryRow\nProductRow\nProductRow\nStep 2: Build a static version in React",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "ProductRow\nStep 2: Build a static version in React\nNow that you have your component hierarchy, it\u2019s time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity\u2026 yet! It\u2019s often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "To build a static version of your app that renders your data model, you\u2019ll want to build components that reuse other components and pass data using props. Props are a way of passing data from parent to child. (If you\u2019re familiar with the concept of state, don\u2019t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don\u2019t need it.)",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "You can either build \u201ctop down\u201d by starting with building the components higher up in the hierarchy (like FilterableProductTable) or \u201cbottom up\u201d by working from components lower down (like ProductRow). In simpler examples, it\u2019s usually easier to go top-down, and on larger projects, it\u2019s easier to go bottom-up.\nFilterableProductTable\nProductRow\nfunction ProductCategoryRow({ category }) {\n return (\n \n \n {category}\n \n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;\n\n products.forEach((product) => {\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}\n\nfunction SearchBar() {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function FilterableProductTable({ products }) {\n return (\n \n \n \n {category}\n \n \n );\n}\n\nfunction ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products, filterText, inStockOnly }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "products.forEach((product) => {\n if (\n product.name.toLowerCase().indexOf(\n filterText.toLowerCase()\n ) === -1\n ) {\n return;\n }\n if (inStockOnly && !product.stocked) {\n return;\n }\n if (product.category !== lastCategory) {\n rows.push(\n \n \n \n Name \n Price \n \n \n {rows}\n
\n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function SearchBar({ filterText, inStockOnly }) {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "const PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "export default function App() {\n return \n {walk ? 'Walk' : 'Stop'}\n
\n \n );\n}\nAdd an alert to the click handler. When the light is green and says \u201cWalk\u201d, clicking the button should say \u201cStop is next\u201d. When the light is red and says \u201cStop\u201d, clicking the button should say \u201cWalk is next\u201d.\nalert",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "alert\nDoes it make a difference whether you put the alert before or after the setWalk call?\nalert\nsetWalk",
+ "title": "State as a Snapshot \u2013 React",
+ "url": "https://react.dev/learn/state-as-a-snapshot"
+ },
+ {
+ "content": "Sharing State Between Components\nSometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as lifting state up, and it\u2019s one of the most common things you will do writing React code.\nYou will learn\nHow to share state between components by lifting it up\nWhat are controlled and uncontrolled components\nLifting state up by example",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "What are controlled and uncontrolled components\nLifting state up by example\nIn this example, a parent Accordion component renders two separate Panels:\nAccordion\nPanel\nAccordion",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nEach Panel component has a boolean isActive state that determines whether its content is visible.\nPanel\nisActive\nPress the Show button for both panels:\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children }) {\n const [isActive, setIsActive] = useState(false);\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "\n \n );\n}\nNotice how pressing one panel\u2019s button does not affect the other panel\u2014they are independent.\nInitially, each Panel\u2019s isActive state is false, so they both appear collapsed\nPanel\nisActive\nfalse\nClicking either Panel\u2019s button will only update that Panel\u2019s isActive state alone\nPanel\nPanel\nisActive",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nisActive\nBut now let\u2019s say you want to change it so that only one panel is expanded at any given time. With that design, expanding the second panel should collapse the first one. How would you do that?\nTo coordinate these two panels, you need to \u201clift their state up\u201d to a parent component in three steps:\nRemove state from the child components.\nPass hardcoded data from the common parent.\nAdd state to the common parent and pass it down together with the event handlers.",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Add state to the common parent and pass it down together with the event handlers.\nThis will allow the Accordion component to coordinate both Panels and only expand one at a time.\nAccordion\nPanel\nStep 1: Remove state from the child components\nYou will give control of the Panel\u2019s isActive to its parent component. This means that the parent component will pass isActive to Panel as a prop instead. Start by removing this line from the Panel component:\nPanel\nisActive\nisActive\nPanel\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nisActive\nPanel\nPanel\nconst [isActive, setIsActive] = useState(false);\nconst [isActive, setIsActive] = useState(false);\nAnd instead, add isActive to the Panel\u2019s list of props:\nisActive\nPanel\nfunction Panel({ title, children, isActive }) {\nfunction Panel({ title, children, isActive }) {\nNow the Panel\u2019s parent component can control isActive by passing it down as a prop. Conversely, the Panel component now has no control over the value of isActive\u2014it\u2019s now up to the parent component!",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nPanel\nisActive\nStep 2: Pass hardcoded data from the common parent\nTo lift state up, you must locate the closest common parent component of both of the child components that you want to coordinate:\nAccordion (closest common parent)",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nIn this example, it\u2019s the Accordion component. Since it\u2019s above both panels and can control their props, it will become the \u201csource of truth\u201d for which panel is currently active. Make the Accordion component pass a hardcoded value of isActive (for example, true) to both panels:\nAccordion\nAccordion\nisActive\ntrue\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n Almaty, Kazakhstan
\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children, isActive }) {\n return (\n \n {title}
\n {isActive ? (\n {children}
\n ) : (\n \n )}\n \n );\n}\nTry editing the hardcoded isActive values in the Accordion component and see the result on the screen.\nisActive\nAccordion\nStep 3: Add state to the common parent",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "isActive\nAccordion\nStep 3: Add state to the common parent\nLifting state up often changes the nature of what you\u2019re storing as state.\nIn this case, only one panel should be active at a time. This means that the Accordion common parent component needs to keep track of which panel is the active one. Instead of a boolean value, it could use a number as the index of the active Panel for the state variable:\nAccordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Accordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);\nconst [activeIndex, setActiveIndex] = useState(0);\nWhen the activeIndex is 0, the first panel is active, and when it\u2019s 1, it\u2019s the second one.\nactiveIndex\n0\n1",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "activeIndex\n0\n1\nClicking the \u201cShow\u201d button in either Panel needs to change the active index in Accordion. A Panel can\u2019t set the activeIndex state directly because it\u2019s defined inside the Accordion. The Accordion component needs to explicitly allow the Panel component to change its state by passing an event handler down as a prop:\nPanel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel\n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... \n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "The
Amazing scientists
\nAmazing scientists
Amazing scientists
Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
Hedy Lamarr's Todos
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
Hedy Lamarr's Todos
\n\n - \n
- Invent new traffic lights\n
- Rehearse a movie scene\n
- Improve the spectrum technology\n
:\n
\n \n ",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "If you don\u2019t want to add an extra
Hedy Lamarr's Todos
- ...
Hedy Lamarr's Todos
- ...
to your markup, you can write <> and instead:\n
\n<>\n\n<> ![]()
must become ![]()
, and wrapping tags like - oranges must be written as
- oranges
.\n![]()
\n![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "![]()
\n- oranges\n
- oranges
\nThis is how Hedy Lamarr\u2019s image and list items look closed:\n<> \n",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "\nYou can find all these attributes in the list of DOM component props. If you get one wrong, don\u2019t worry\u2014React will print a message with a possible correction to the browser console.\nPitfall\nFor historical reasons, aria-* and data-* attributes are written as in HTML with dashes.\naria-*\ndata-*\nPro-tip: Use a JSX Converter",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "aria-*\ndata-*\nPro-tip: Use a JSX Converter\nConverting all these attributes in existing markup can be tedious! We recommend using a converter to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it\u2019s still worth understanding what is going on so that you can comfortably write JSX on your own.\nHere is your final result:\nexport default function TodoList() {\n return (\n <>\n \n \n \n \n );\n}\nWhen you pass drinkers={2} to Recipe, it will return JSX containing 2 cups of water. Always.\ndrinkers={2}\nRecipe\n2 cups of water\nIf you pass drinkers={4}, it will return JSX containing 4 cups of water. Always.\ndrinkers={4}\n4 cups of water\nJust like a math formula.",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "drinkers={4}\n4 cups of water\nJust like a math formula.\nYou could think of your components as recipes: if you follow them and don\u2019t introduce new ingredients during the cooking process, you will get the same dish every time. That \u201cdish\u201d is the JSX that the component serves to React to render.\nIllustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Illustrated by Rachel Lee Nabors\nSide Effects: (un)intended consequences\nReact\u2019s rendering process must always be pure. Components should only return their JSX, and not change any objects or variables that existed before rendering\u2014that would make them impure!\nHere is a component that breaks this rule:\nlet guest = 0;",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "function Cup() {\n // Bad: changing a preexisting variable!\n guest = guest + 1;\n return . Some frameworks do this by default.\n\nLocal mutation: Your component\u2019s little secret",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "\nLocal mutation: Your component\u2019s little secret\nIn the above example, the problem was that the component changed a preexisting variable while rendering. This is often called a \u201cmutation\u201d to make it sound a bit scarier. Pure functions don\u2019t mutate variables outside of the function\u2019s scope or objects that were created before the call\u2014that makes them impure!",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "However, it\u2019s completely fine to change variables and objects that you\u2019ve just created while rendering. In this example, you create an [] array, assign it to a cups variable, and then push a dozen cups into it:\n[]\ncups\npush\nfunction Cup({ guest }) {\n return \u2019s CSS class to \"night\" during the time from midnight to six hours in the morning, and \"day\" at all other times. However, it doesn\u2019t work. Can you fix this component?\n
\n {show &&
\n {show &&\n \n {category}\n \n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductTable({ products }) {\n const rows = [];\n let lastCategory = null;\n\n products.forEach((product) => {\n if (product.category !== lastCategory) {\n rows.push(\n \n \n
\n );\n}\n\nfunction SearchBar() {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function FilterableProductTable({ products }) {\n return (\n \n \n {category}\n \n \n );\n}\n\nfunction ProductRow({ product }) {\n const name = product.stocked ? product.name :\n \n {product.name}\n ;\n\n return (\n \n {name} \n {product.price} \n \n );\n}\n\nfunction ProductTable({ products, filterText, inStockOnly }) {\n const rows = [];\n let lastCategory = null;",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "products.forEach((product) => {\n if (\n product.name.toLowerCase().indexOf(\n filterText.toLowerCase()\n ) === -1\n ) {\n return;\n }\n if (inStockOnly && !product.stocked) {\n return;\n }\n if (product.category !== lastCategory) {\n rows.push(\n \n \n
\n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function SearchBar({ filterText, inStockOnly }) {\n return (\n \n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "const PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "export default function App() {\n return \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "\n \n );\n}\nNotice how pressing one panel\u2019s button does not affect the other panel\u2014they are independent.\nInitially, each Panel\u2019s isActive state is false, so they both appear collapsed\nPanel\nisActive\nfalse\nClicking either Panel\u2019s button will only update that Panel\u2019s isActive state alone\nPanel\nPanel\nisActive",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nisActive\nBut now let\u2019s say you want to change it so that only one panel is expanded at any given time. With that design, expanding the second panel should collapse the first one. How would you do that?\nTo coordinate these two panels, you need to \u201clift their state up\u201d to a parent component in three steps:\nRemove state from the child components.\nPass hardcoded data from the common parent.\nAdd state to the common parent and pass it down together with the event handlers.",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Add state to the common parent and pass it down together with the event handlers.\nThis will allow the Accordion component to coordinate both Panels and only expand one at a time.\nAccordion\nPanel\nStep 1: Remove state from the child components\nYou will give control of the Panel\u2019s isActive to its parent component. This means that the parent component will pass isActive to Panel as a prop instead. Start by removing this line from the Panel component:\nPanel\nisActive\nisActive\nPanel\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nisActive\nPanel\nPanel\nconst [isActive, setIsActive] = useState(false);\nconst [isActive, setIsActive] = useState(false);\nAnd instead, add isActive to the Panel\u2019s list of props:\nisActive\nPanel\nfunction Panel({ title, children, isActive }) {\nfunction Panel({ title, children, isActive }) {\nNow the Panel\u2019s parent component can control isActive by passing it down as a prop. Conversely, the Panel component now has no control over the value of isActive\u2014it\u2019s now up to the parent component!",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nisActive\nPanel\nisActive\nStep 2: Pass hardcoded data from the common parent\nTo lift state up, you must locate the closest common parent component of both of the child components that you want to coordinate:\nAccordion (closest common parent)",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nIn this example, it\u2019s the Accordion component. Since it\u2019s above both panels and can control their props, it will become the \u201csource of truth\u201d for which panel is currently active. Make the Accordion component pass a hardcoded value of isActive (for example, true) to both panels:\nAccordion\nAccordion\nisActive\ntrue\nimport { useState } from 'react';",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "export default function Accordion() {\n return (\n <>\n \n With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.\n \n ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": " \n \n The name comes from \u0430\u043b\u043c\u0430, the Kazakh word for \"apple\" and is often translated as \"full of apples\". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.\n \n \n );\n}",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "function Panel({ title, children, isActive }) {\n return (\n \n \n );\n}\nTry editing the hardcoded isActive values in the Accordion component and see the result on the screen.\nisActive\nAccordion\nStep 3: Add state to the common parent",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "isActive\nAccordion\nStep 3: Add state to the common parent\nLifting state up often changes the nature of what you\u2019re storing as state.\nIn this case, only one panel should be active at a time. This means that the Accordion common parent component needs to keep track of which panel is the active one. Instead of a boolean value, it could use a number as the index of the active Panel for the state variable:\nAccordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Accordion\nboolean\nPanel\nconst [activeIndex, setActiveIndex] = useState(0);\nconst [activeIndex, setActiveIndex] = useState(0);\nWhen the activeIndex is 0, the first panel is active, and when it\u2019s 1, it\u2019s the second one.\nactiveIndex\n0\n1",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "activeIndex\n0\n1\nClicking the \u201cShow\u201d button in either Panel needs to change the active index in Accordion. A Panel can\u2019t set the activeIndex state directly because it\u2019s defined inside the Accordion. The Accordion component needs to explicitly allow the Panel component to change its state by passing an event handler down as a prop:\nPanel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "Panel\nAccordion\nPanel\nactiveIndex\nAccordion\nAccordion\nPanel\n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... \n<> setActiveIndex(0)} > ... setActiveIndex(1)} > ... ",
+ "title": "Sharing State Between Components \u2013 React",
+ "url": "https://react.dev/learn/sharing-state-between-components"
+ },
+ {
+ "content": "The
Hedy Lamarr's Todos
- ...
Hedy Lamarr's Todos
- ...
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
- Invent new traffic lights
- Rehearse a movie scene
- Improve the spectrum technology
\n",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "\nYou can find all these attributes in the list of DOM component props. If you get one wrong, don\u2019t worry\u2014React will print a message with a possible correction to the browser console.\nPitfall\nFor historical reasons, aria-* and data-* attributes are written as in HTML with dashes.\naria-*\ndata-*\nPro-tip: Use a JSX Converter",
+ "title": "Writing Markup with JSX \u2013 React",
+ "url": "https://react.dev/learn/writing-markup-with-jsx"
+ },
+ {
+ "content": "aria-*\ndata-*\nPro-tip: Use a JSX Converter\nConverting all these attributes in existing markup can be tedious! We recommend using a converter to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it\u2019s still worth understanding what is going on so that you can comfortably write JSX on your own.\nHere is your final result:\nexport default function TodoList() {\n return (\n <>\n Hedy Lamarr's Todos
\nHedy Lamarr's Todos
\n\n - \n
- Invent new traffic lights \n
- Rehearse a movie scene \n
- Improve the spectrum technology \n
\n
\n Welcome to my website!
\n", + "title": "Writing Markup with JSX \u2013 React", + "url": "https://react.dev/learn/writing-markup-with-jsx" + }, + { + "content": "
\n
\n Welcome to my website!
\n\n You can find my thoughts here.\n
\n And pictures of scientists!\n
- \n
- Boil {drinkers} cups of water. \n
- Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice. \n
- Add {0.5 * drinkers} cups of milk to boil and sugar to taste. \n
Spiced Chai Recipe
\nFor two
\nFor a gathering
\nTea cup for guest #{guest}
;\n}", + "title": "Keeping Components Pure \u2013 React", + "url": "https://react.dev/learn/keeping-components-pure" + }, + { + "content": "export default function TeaSet() {\n return (\n <>\nTea cup for guest #{guest}
;\n}", + "title": "Keeping Components Pure \u2013 React", + "url": "https://react.dev/learn/keeping-components-pure" + }, + { + "content": "export default function TeaSet() {\n return (\n <>\nTea cup for guest #{guest}
;\n}", + "title": "Keeping Components Pure \u2013 React", + "url": "https://react.dev/learn/keeping-components-pure" + }, + { + "content": "export default function TeaGathering() {\n const cups = [];\n for (let i = 1; i <= 12; i++) {\n cups.push(\u2019s CSS class to \"night\" during the time from midnight to six hours in the morning, and \"day\" at all other times. However, it doesn\u2019t work. Can you fix this component?\n\n\"night\"\n\"day\"\nYou can verify whether your solution works by temporarily changing the computer\u2019s timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!\nexport default function Clock({ time }) {",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "export default function Clock({ time }) {\n const hours = time.getHours();\n if (hours >= 0 && hours <= 6) {\n document.getElementById('time').className = 'night';\n } else {\n document.getElementById('time').className = 'day';\n }\n return (\n \n {time.toLocaleTimeString()}\n
\n );\n}",
+ "title": "Keeping Components Pure \u2013 React",
+ "url": "https://react.dev/learn/keeping-components-pure"
+ },
+ {
+ "content": "Reusing Logic with Custom Hooks\nReact comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you\u2019ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application\u2019s needs.\nuseState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own\nHow to reuse logic between components\nHow to name and structure your custom Hooks\nWhen and why to extract custom Hooks\nCustom Hooks: Sharing logic between components",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "When and why to extract custom Hooks\nCustom Hooks: Sharing logic between components\nImagine you\u2019re developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you\u2019ll need two things in your component:\nA piece of state that tracks whether the network is online.",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "A piece of state that tracks whether the network is online.\nAn Effect that subscribes to the global online and offline events, and updates that state.\nonline\noffline\nThis will keep your component synchronized with the network status. You might start with something like this:\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\nTry turning your network on and off, and notice how this StatusBar updates in response to your actions.\nStatusBar\nNow imagine you also want to use the same logic in a different component. You want to implement a Save button that will become disabled and show \u201cReconnecting\u2026\u201d instead of \u201cSave\u201d while the network is off.\nTo start, you can copy and paste the isOnline state and the Effect into SaveButton:\nisOnline\nSaveButton",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "isOnline\nSaveButton\nimport { useState, useEffect } from 'react';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function SaveButton() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "return (\n \n );\n}\nVerify that, if you turn off the network, the button will change its appearance.\nThese two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different visual appearance, you want to reuse the logic between them.\nExtracting your own custom Hook from a component",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Extracting your own custom Hook from a component\nImagine for a moment that, similar to useState and useEffect, there was a built-in useOnlineStatus Hook. Then both of these components could be simplified and you could remove the duplication between them:\nuseState\nuseEffect\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "useState\nuseEffect\nuseOnlineStatus\nfunction StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() { const isOnline = useOnlineStatus(); return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "Although there is no such built-in Hook, you can write it yourself. Declare a function called useOnlineStatus and move all the duplicated code into it from the components you wrote earlier:\nuseOnlineStatus",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "At the end of the function, return isOnline. This lets your components read that value:\nisOnline\nimport { useOnlineStatus } from './useOnlineStatus.js';",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "function StatusBar() {\n const isOnline = useOnlineStatus();\n return {isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n\n function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }\n\n return (\n \n );\n}",
+ "title": "Reusing Logic with Custom Hooks \u2013 React",
+ "url": "https://react.dev/learn/reusing-logic-with-custom-hooks"
+ },
+ {
+ "content": "export default function App() {\n return (\n <>\n
\n {time.toLocaleTimeString()}\n
\n );\n}", + "title": "Keeping Components Pure \u2013 React", + "url": "https://react.dev/learn/keeping-components-pure" + }, + { + "content": "Reusing Logic with Custom Hooks\nReact comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you\u2019ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application\u2019s needs.\nuseState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useState\nuseContext\nuseEffect\nYou will learn\nWhat custom Hooks are, and how to write your own\nHow to reuse logic between components\nHow to name and structure your custom Hooks\nWhen and why to extract custom Hooks\nCustom Hooks: Sharing logic between components", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "When and why to extract custom Hooks\nCustom Hooks: Sharing logic between components\nImagine you\u2019re developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you\u2019ll need two things in your component:\nA piece of state that tracks whether the network is online.", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "A piece of state that tracks whether the network is online.\nAn Effect that subscribes to the global online and offline events, and updates that state.\nonline\noffline\nThis will keep your component synchronized with the network status. You might start with something like this:\nimport { useState, useEffect } from 'react';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "return{isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\nTry turning your network on and off, and notice how this StatusBar updates in response to your actions.\nStatusBar\nNow imagine you also want to use the same logic in a different component. You want to implement a Save button that will become disabled and show \u201cReconnecting\u2026\u201d instead of \u201cSave\u201d while the network is off.\nTo start, you can copy and paste the isOnline state and the Effect into SaveButton:\nisOnline\nSaveButton", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "isOnline\nSaveButton\nimport { useState, useEffect } from 'react';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function SaveButton() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "return (\n \n );\n}\nVerify that, if you turn off the network, the button will change its appearance.\nThese two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different visual appearance, you want to reuse the logic between them.\nExtracting your own custom Hook from a component", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Extracting your own custom Hook from a component\nImagine for a moment that, similar to useState and useEffect, there was a built-in useOnlineStatus Hook. Then both of these components could be simplified and you could remove the duplication between them:\nuseState\nuseEffect\nuseOnlineStatus", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useState\nuseEffect\nuseOnlineStatus\nfunction StatusBar() { const isOnline = useOnlineStatus(); return{isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function StatusBar() { const isOnline = useOnlineStatus(); return{isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;}function SaveButton() { const isOnline = useOnlineStatus(); function handleSaveClick() { console.log('\u2705 Progress saved'); } return ( );}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Although there is no such built-in Hook, you can write it yourself. Declare a function called useOnlineStatus and move all the duplicated code into it from the components you wrote earlier:\nuseOnlineStatus", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline;}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "At the end of the function, return isOnline. This lets your components read that value:\nisOnline\nimport { useOnlineStatus } from './useOnlineStatus.js';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function StatusBar() {\n const isOnline = useOnlineStatus();\n return{isOnline ? '\u2705 Online' : '\u274c Disconnected'}
;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n\n function handleSaveClick() {\n console.log('\u2705 Progress saved');\n }\n\n return (\n \n );\n}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function App() {\n return (\n <>\nGood morning, {firstName} {lastName}.
\n \n );\n}\nThere\u2019s some repetitive logic for each form field:\nThere\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "There\u2019s a piece of state (firstName and lastName).\nfirstName\nlastName\nThere\u2019s a change handler (handleFirstNameChange and handleLastNameChange).\nhandleFirstNameChange\nhandleLastNameChange\nThere\u2019s a piece of JSX that specifies the value and onChange attributes for that input.\nvalue\nonChange\nYou can extract the repetitive logic into this useFormInput custom Hook:\nuseFormInput\nimport { useState } from 'react';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export function useFormInput(initialValue) {\n const [value, setValue] = useState(initialValue);\n\n function handleChange(e) {\n setValue(e.target.value);\n }\n\n const inputProps = {\n value: value,\n onChange: handleChange\n };", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "return inputProps;\n}\nNotice that it only declares one state variable called value.\nvalue\nHowever, the Form component calls useFormInput two times:\nForm\nuseFormInput\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nfunction Form() { const firstNameProps = useFormInput('Mary'); const lastNameProps = useFormInput('Poppins'); // ...\nThis is why it works like declaring two separate state variables!", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "This is why it works like declaring two separate state variables!\nCustom Hooks let you share stateful logic but not state itself. Each call to a Hook is completely independent from every other call to the same Hook. This is why the two sandboxes above are completely equivalent. If you\u2019d like, scroll back up and compare them. The behavior before and after extracting a custom Hook is identical.", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "When you need to share the state itself between multiple components, lift it up and pass it down instead.\nPassing reactive values between Hooks\nThe code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks need to be pure. Think of custom Hooks\u2019 code as part of your component\u2019s body!", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room:\nimport { useState, useEffect } from 'react';\nimport { createConnection } from './chat.js';\nimport { showNotification } from './notifications.js';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useEffect(() => {\n const options = {\n serverUrl: serverUrl,\n roomId: roomId\n };\n const connection = createConnection(options);\n connection.on('message', (msg) => {\n showNotification('New message: ' + msg);\n });\n connection.connect();\n return () => connection.disconnect();\n }, [roomId, serverUrl]);", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "return (\n <>\n \nWelcome to the {roomId} room!
\n \n );\n}\nWhen you change serverUrl or roomId, the Effect \u201creacts\u201d to your changes and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect\u2019s dependencies.\nserverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "serverUrl\nroomId\nNow move the Effect\u2019s code into a custom Hook:\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nThis lets your ChatRoom component call your custom Hook without worrying about how it works inside:\nChatRoom", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "ChatRoom\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <>Welcome to the {roomId} room!
);}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); return ( <>Welcome to the {roomId} room!
);}\nThis looks much simpler! (But it does the same thing.)", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "This looks much simpler! (But it does the same thing.)\nNotice that the logic still responds to prop and state changes. Try editing the server URL or the selected room:\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl\n });", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "return (\n <>\n \nWelcome to the {roomId} room!
\n \n );\n}\nNotice how you\u2019re taking the return value of one Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...\nand passing it as an input to another Hook:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ...", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Every time your ChatRoom component re-renders, it passes the latest roomId and serverUrl to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with audio or video processing software, chaining Hooks like this might remind you of chaining visual or audio effects. It\u2019s as if the output of useState \u201cfeeds into\u201d the input of the useChatRoom.)\nChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "ChatRoom\nroomId\nserverUrl\nuseState\nuseChatRoom\nPassing event handlers to custom Hooks\nUnder Construction\nThis section describes an experimental API that has not yet been released in a stable version of React.\nAs you start using useChatRoom in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:\nuseChatRoom", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useChatRoom\nexport function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { showNotification('New message: ' + msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]);}\nLet\u2019s say you want to move this logic back to your component:", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Let\u2019s say you want to move this logic back to your component:\nexport default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl, onReceiveMessage(msg) { showNotification('New message: ' + msg); } }); // ...\nTo make this work, change your custom Hook to take onReceiveMessage as one of its named options:\nonReceiveMessage", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "onReceiveMessage\nexport function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onReceiveMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl, onReceiveMessage]); // \u2705 All dependencies declared}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "This will work, but there\u2019s one more improvement you can do when your custom Hook accepts event handlers.\nAdding a dependency on onReceiveMessage is not ideal because it will cause the chat to re-connect every time the component re-renders. Wrap this event handler into an Effect Event to remove it from the dependencies:\nonReceiveMessage", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "import { useEffect, useEffectEvent } from 'react';// ...export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // \u2705 All dependencies declared}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Now the chat won\u2019t re-connect every time that the ChatRoom component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:\nChatRoom\nimport { useState } from 'react';\nimport { useChatRoom } from './useChatRoom.js';\nimport { showNotification } from './notifications.js';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function ChatRoom({ roomId }) {\n const [serverUrl, setServerUrl] = useState('https://localhost:1234');\n\n useChatRoom({\n roomId: roomId,\n serverUrl: serverUrl,\n onReceiveMessage(msg) {\n showNotification('New message: ' + msg);\n }\n });", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "return (\n <>\n \nWelcome to the {roomId} room!
\n \n );\n}\nNotice how you no longer need to know how useChatRoom works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That\u2019s the power of custom Hooks.\nuseChatRoom\nWhen to use custom Hooks", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useChatRoom\nWhen to use custom Hooks\nYou don\u2019t need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a useFormInput Hook to wrap a single useState call like earlier is probably unnecessary.\nuseFormInput\nuseState", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useFormInput\nuseState\nHowever, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. You shouldn\u2019t need Effects very often, so if you\u2019re writing one, it means that you need to \u201cstep outside React\u201d to synchronize with some external system or to do something that React doesn\u2019t have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "For example, consider a ShippingForm component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:\nShippingForm", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function ShippingForm({ country }) { const [cities, setCities] = useState(null); // This Effect fetches cities for a country useEffect(() => { let ignore = false; fetch(`/api/cities?country=${country}`) .then(response => response.json()) .then(json => { if (!ignore) { setCities(json); } }); return () => { ignore = true; }; }, [country]); const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "const [city, setCity] = useState(null); const [areas, setAreas] = useState(null); // This Effect fetches areas for the selected city useEffect(() => { if (city) { let ignore = false; fetch(`/api/areas?city=${city}`) .then(response => response.json()) .then(json => { if (!ignore) { setAreas(json); } }); return () => { ignore = true; }; } }, [city]); // ...", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Although this code is quite repetitive, it\u2019s correct to keep these Effects separate from each other. They synchronize two different things, so you shouldn\u2019t merge them into one Effect. Instead, you can simplify the ShippingForm component above by extracting the common logic between them into your own useData Hook:\nShippingForm\nuseData", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "ShippingForm\nuseData\nfunction useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function useData(url) { const [data, setData] = useState(null); useEffect(() => { if (url) { let ignore = false; fetch(url) .then(response => response.json()) .then(json => { if (!ignore) { setData(json); } }); return () => { ignore = true; }; } }, [url]); return data;}\nNow you can replace both Effects in the ShippingForm components with calls to useData:\nShippingForm\nuseData", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "ShippingForm\nuseData\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...\nfunction ShippingForm({ country }) { const cities = useData(`/api/cities?country=${country}`); const [city, setCity] = useState(null); const areas = useData(city ? `/api/areas?city=${city}` : null); // ...", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Extracting a custom Hook makes the data flow explicit. You feed the url in and you get the data out. By \u201chiding\u201d your Effect inside useData, you also prevent someone working on the ShippingForm component from adding unnecessary dependencies to it. With time, most of your app\u2019s Effects will be in custom Hooks.\nurl\ndata\nuseData\nShippingForm", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "url\ndata\nuseData\nShippingForm\nStart by choosing your custom Hook\u2019s name. If you struggle to pick a clear name, it might mean that your Effect is too coupled to the rest of your component\u2019s logic, and is not yet ready to be extracted.\nIdeally, your custom Hook\u2019s name should be clear enough that even a person who doesn\u2019t write code often could have a good guess about what your custom Hook does, what it takes, and what it returns:\n\u2705 useData(url)\nuseData(url)", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "\u2705 useData(url)\nuseData(url)\n\u2705 useImpressionLog(eventName, extraData)\nuseImpressionLog(eventName, extraData)\n\u2705 useChatRoom(options)\nuseChatRoom(options)\nWhen you synchronize with an external system, your custom Hook name may be more technical and use jargon specific to that system. It\u2019s good as long as it would be clear to a person familiar with that system:\n\u2705 useMediaQuery(query)\nuseMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useMediaQuery(query)\n\u2705 useSocket(url)\nuseSocket(url)\n\u2705 useIntersectionObserver(ref, options)\nuseIntersectionObserver(ref, options)\nKeep custom Hooks focused on concrete high-level use cases. Avoid creating and using custom \u201clifecycle\u201d Hooks that act as alternatives and convenience wrappers for the useEffect API itself:\nuseEffect\n\ud83d\udd34 useMount(fn)\nuseMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useMount(fn)\n\ud83d\udd34 useEffectOnce(fn)\nuseEffectOnce(fn)\n\ud83d\udd34 useUpdateEffect(fn)\nuseUpdateEffect(fn)\nFor example, this useMount Hook tries to ensure some code only runs \u201con mount\u201d:\nuseMount", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useMount\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \ud83d\udd34 Avoid: using custom \"lifecycle\" Hooks useMount(() => { const connection = createConnection({ roomId, serverUrl }); connection.connect(); post('/analytics/event', { eventName: 'visit_chat' }); }); // ...}// \ud83d\udd34 Avoid: creating custom \"lifecycle\" Hooksfunction useMount(fn) { useEffect(() => { fn(); }, []); // \ud83d\udd34 React Hook useEffect has a missing dependency: 'fn'}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Custom \u201clifecycle\u201d Hooks like useMount don\u2019t fit well into the React paradigm. For example, this code example has a mistake (it doesn\u2019t \u201creact\u201d to roomId or serverUrl changes), but the linter won\u2019t warn you about it because the linter only checks direct useEffect calls. It won\u2019t know about your Hook.\nuseMount\nroomId\nserverUrl\nuseEffect\nIf you\u2019re writing an Effect, start by using the React API directly:", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Good: two raw Effects separated by purpose useEffect(() => { const connection = createConnection({ serverUrl, roomId }); connection.connect(); return () => connection.disconnect(); }, [serverUrl, roomId]); useEffect(() => { post('/analytics/event', { eventName: 'visit_chat', roomId }); }, [roomId]); // ...}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Then, you can (but don\u2019t have to) extract custom Hooks for different high-level use cases:\nfunction ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // \u2705 Great: custom Hooks named after their purpose useChatRoom({ serverUrl, roomId }); useImpressionLog('visit_chat', { roomId }); // ...}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "A good custom Hook makes the calling code more declarative by constraining what it does. For example, useChatRoom(options) can only connect to the chat room, while useImpressionLog(eventName, extraData) can only send an impression log to the analytics. If your custom Hook API doesn\u2019t constrain the use cases and is very abstract, in the long run it\u2019s likely to introduce more problems than it solves.\nuseChatRoom(options)\nuseImpressionLog(eventName, extraData)", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useChatRoom(options)\nuseImpressionLog(eventName, extraData)\nCustom Hooks help you migrate to better patterns", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Custom Hooks help you migrate to better patterns\nEffects are an \u201cescape hatch\u201d: you use them when you need to \u201cstep outside React\u201d and when there is no better built-in solution for your use case. With time, the React team\u2019s goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping your Effects in custom Hooks makes it easier to upgrade your code when these solutions become available.", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Let\u2019s return to this example:\nimport { useState, useEffect } from 'react';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true);\n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n function handleOffline() {\n setIsOnline(false);\n }\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "window.removeEventListener('offline', handleOffline);\n };\n }, []);\n return isOnline;\n}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "In the above example, useOnlineStatus is implemented with a pair of useState and useEffect. However, this isn\u2019t the best possible solution. There is a number of edge cases it doesn\u2019t consider. For example, it assumes that when the component mounts, isOnline is already true, but this may be wrong if the network already went offline. You can use the browser navigator.onLine API to check for that, but using it directly would not work on the server for generating the initial HTML. In short, this", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "but using it directly would not work on the server for generating the initial HTML. In short, this code could be improved.", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useOnlineStatus\nuseState\nuseEffect\nisOnline\ntrue\nnavigator.onLine\nReact includes a dedicated API called useSyncExternalStore which takes care of all of these problems for you. Here is your useOnlineStatus Hook, rewritten to take advantage of this new API:\nuseSyncExternalStore\nuseOnlineStatus\nimport { useSyncExternalStore } from 'react';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function subscribe(callback) {\n window.addEventListener('online', callback);\n window.addEventListener('offline', callback);\n return () => {\n window.removeEventListener('online', callback);\n window.removeEventListener('offline', callback);\n };\n}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export function useOnlineStatus() {\n return useSyncExternalStore(\n subscribe,\n () => navigator.onLine, // How to get the value on the client\n () => true // How to get the value on the server\n );\n}\nNotice how you didn\u2019t need to change any of the components to make this migration:\nfunction StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function StatusBar() { const isOnline = useOnlineStatus(); // ...}function SaveButton() { const isOnline = useOnlineStatus(); // ...}\nThis is another reason for why wrapping Effects in custom Hooks is often beneficial:\nYou make the data flow to and from your Effects very explicit.\nYou let your components focus on the intent rather than on the exact implementation of your Effects.\nWhen React adds new features, you can remove those Effects without changing any of your components.", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "When React adds new features, you can remove those Effects without changing any of your components.\nSimilar to a design system, you might find it helpful to start extracting common idioms from your app\u2019s components into custom Hooks. This will keep your components\u2019 code focused on the intent, and let you avoid writing raw Effects very often. Many excellent custom Hooks are maintained by the React community.", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "We\u2019re still working out the details, but we expect that in the future, you\u2019ll write data fetching like this:\nimport { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "import { use } from 'react'; // Not available yet!function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); const [city, setCity] = useState(null); const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null; // ...", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "If you use custom Hooks like useData above in your app, it will require fewer changes to migrate to the eventually recommended approach than if you write raw Effects in every component manually. However, the old approach will still work fine, so if you feel happy writing raw Effects, you can continue to do that.\nuseData\nThere is more than one way to do it", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "useData\nThere is more than one way to do it\nLet\u2019s say you want to implement a fade-in animation from scratch using the browser requestAnimationFrame API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you hold in a ref until it reaches 1. Your code might start like this:\nrequestAnimationFrame\n1\nimport { useState, useEffect, useRef } from 'react';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function Welcome() {\n const ref = useRef(null);\n\n useEffect(() => {\n const duration = 1000;\n const node = ref.current;\n\n let startTime = performance.now();\n let frameId = null;\n\n function onFrame(now) {\n const timePassed = now - startTime;\n const progress = Math.min(timePassed / duration, 1);\n onProgress(progress);\n if (progress < 1) {\n // We still have more frames to paint\n frameId = requestAnimationFrame(onFrame);\n }\n }", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "function onProgress(progress) {\n node.style.opacity = progress;\n }\n\n function start() {\n onProgress(0);\n startTime = performance.now();\n frameId = requestAnimationFrame(onFrame);\n }\n\n function stop() {\n cancelAnimationFrame(frameId);\n startTime = null;\n frameId = null;\n }\n\n start();\n return () => stop();\n }, []);\n\n return (\n\n Welcome\n
\n );\n}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n\n {show &&
\n Welcome\n
\n );\n}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function App() {\n const [show, setShow] = useState(false);\n return (\n <>\n \n\n {show &&
Seconds passed: {count}
;}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function Counter() { const count = useCounter(); returnSeconds passed: {count}
;}\nYou\u2019ll need to write your custom Hook in useCounter.js and import it into the App.js file.\nuseCounter.js\nApp.js\nimport { useState, useEffect } from 'react';", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "export default function Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(c => c + 1);\n }, 1000);\n return () => clearInterval(id);\n }, []);\n returnSeconds passed: {count}
;\n}", + "title": "Reusing Logic with Custom Hooks \u2013 React", + "url": "https://react.dev/learn/reusing-logic-with-custom-hooks" + }, + { + "content": "Thinking in React\nReact can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we\u2019ll guide you through the thought process of building a searchable product data table with React.", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "Start with the mockup\nImagine that you already have a JSON API and a mockup from a designer.\nThe JSON API returns some data that looks like this:", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "The JSON API returns some data that looks like this:\n[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "[ { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" }, { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" }, { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" }, { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" }, { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" }, { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }]\nThe mockup looks like this:", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "The mockup looks like this:\nTo implement a UI in React, you will usually follow the same five steps.\nStep 1: Break the UI into a component hierarchy\nStart by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them!\nDepending on your background, you can think about splitting up a design into components in different ways:", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "Programming\u2014use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.\nCSS\u2014consider what you would make class selectors for. (However, components are a bit less granular.)\nDesign\u2014consider how you would organize the design\u2019s layers.", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "Design\u2014consider how you would organize the design\u2019s layers.\nIf your JSON is well-structured, you\u2019ll often find that it naturally maps to the component structure of your UI. That\u2019s because UI and data models often have the same information architecture\u2014that is, the same shape. Separate your UI into components, where each component matches one piece of your data model.\nThere are five components on this screen:\nFilterableProductTable (grey) contains the entire app.\nFilterableProductTable", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "FilterableProductTable (grey) contains the entire app.\nFilterableProductTable\nSearchBar (blue) receives the user input.\nSearchBar\nProductTable (lavender) displays and filters the list according to the user input.\nProductTable\nProductCategoryRow (green) displays a heading for each category.\nProductCategoryRow\nProductRow\t(yellow) displays a row for each product.\nProductRow", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "ProductRow\t(yellow) displays a row for each product.\nProductRow\nIf you look at ProductTable (lavender), you\u2019ll see that the table header (containing the \u201cName\u201d and \u201cPrice\u201d labels) isn\u2019t its own component. This is a matter of preference, and you could go either way. For this example, it is a part of ProductTable because it appears inside the ProductTable\u2019s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own ProductTableHeader component.", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "ProductTable\nProductTable\nProductTable\nProductTableHeader\nNow that you\u2019ve identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:\nFilterableProductTable", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "SearchBar\nProductTable\n\nProductCategoryRow\nProductRow\nFilterableProductTable\nSearchBar\nSearchBar\nProductTable", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "ProductCategoryRow\nProductRow\nProductTable\nProductCategoryRow\nProductCategoryRow\nProductRow\nProductRow\nStep 2: Build a static version in React", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "ProductRow\nStep 2: Build a static version in React\nNow that you have your component hierarchy, it\u2019s time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity\u2026 yet! It\u2019s often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "To build a static version of your app that renders your data model, you\u2019ll want to build components that reuse other components and pass data using props. Props are a way of passing data from parent to child. (If you\u2019re familiar with the concept of state, don\u2019t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don\u2019t need it.)", + "title": "Thinking in React \u2013 React", + "url": "https://react.dev/learn/thinking-in-react" + }, + { + "content": "You can either build \u201ctop down\u201d by starting with building the components higher up in the hierarchy (like FilterableProductTable) or \u201cbottom up\u201d by working from components lower down (like ProductRow). In simpler examples, it\u2019s usually easier to go top-down, and on larger projects, it\u2019s easier to go bottom-up.\nFilterableProductTable\nProductRow\nfunction ProductCategoryRow({ category }) {\n return (\n| Name | \nPrice | \n
|---|
\n
\n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "const PRODUCTS = [\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "export default function App() {\n return \n
\n );\n}",
+ "title": "Thinking in React \u2013 React",
+ "url": "https://react.dev/learn/thinking-in-react"
+ },
+ {
+ "content": "function ProductCategoryRow({ category }) {\n return (\n | Name | \nPrice | \n
|---|
\n {walk ? 'Walk' : 'Stop'}\n
\n \n );\n}\nAdd an alert to the click handler. When the light is green and says \u201cWalk\u201d, clicking the button should say \u201cStop is next\u201d. When the light is red and says \u201cStop\u201d, clicking the button should say \u201cWalk is next\u201d.\nalert", + "title": "State as a Snapshot \u2013 React", + "url": "https://react.dev/learn/state-as-a-snapshot" + }, + { + "content": "alert\nDoes it make a difference whether you put the alert before or after the setWalk call?\nalert\nsetWalk", + "title": "State as a Snapshot \u2013 React", + "url": "https://react.dev/learn/state-as-a-snapshot" + }, + { + "content": "Sharing State Between Components\nSometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as lifting state up, and it\u2019s one of the most common things you will do writing React code.\nYou will learn\nHow to share state between components by lifting it up\nWhat are controlled and uncontrolled components\nLifting state up by example", + "title": "Sharing State Between Components \u2013 React", + "url": "https://react.dev/learn/sharing-state-between-components" + }, + { + "content": "What are controlled and uncontrolled components\nLifting state up by example\nIn this example, a parent Accordion component renders two separate Panels:\nAccordion\nPanel\nAccordion", + "title": "Sharing State Between Components \u2013 React", + "url": "https://react.dev/learn/sharing-state-between-components" + }, + { + "content": "Panel\nPanel\nAccordion\nPanel\nPanel\nPanel\nPanel\nEach Panel component has a boolean isActive state that determines whether its content is visible.\nPanel\nisActive\nPress the Show button for both panels:\nimport { useState } from 'react';", + "title": "Sharing State Between Components \u2013 React", + "url": "https://react.dev/learn/sharing-state-between-components" + }, + { + "content": "function Panel({ title, children }) {\n const [isActive, setIsActive] = useState(false);\n return (\n{title}
\n {isActive ? (\n{children}
\n ) : (\n \n )}\nAlmaty, Kazakhstan
\nAlmaty, Kazakhstan
\n{title}
\n {isActive ? (\n{children}
\n ) : (\n \n )}\n