import React from 'react'; import { render } from 'react-dom'; function OneTimeButton(props) { return ( <button onClick={props.onClick}> You Can Only Click Me Once </button> ); } function sayHi() { console.log('yo'); } render( <OneTimeButton onClick={sayHi}/>, document.querySelector('#root') ); 

1. Denial. Maybe it doesn’t really need to be a class. Maybe I could put the state somewhere else.
2. Realization. Crap, I have to make it into a class, don’t I?
3. Acceptance. ooookkk FINE I’ll convert it.
4. Hard Work. Write out class Thing extends React.Component. Copy-paste the function body into render. Eh crap, now the indentation is wrong. Select the render function, Tab Tab Tab Shift-Tab. After all that the component still does the exact same thing (if you’re lucky, anyway).
5. Finally, add the state. If only this were step 1.

class OneTimeButton extends React.Component { // initialize the state... state = { clicked: false } // make a click handler handleClick = () => { // The handler won't be called if the button // is disabled, so if we got here, it's safe // to trigger the click. this.props.onClick(); // Ok, no more clicking. this.setState({ clicked: true }); } render() { return ( <button onClick={this.handleClick} disabled={this.state.clicked} > You Can Only Click Me Once </button> ); } } 

// we need to import the `useState` hook: // (or write React.useState) import React, { useState } from 'react'; function OneTimeButton(props) { // Create a new piece of state. // It comes with its own updater function! const [clicked, setClicked] = useState(false); // We need to handle button clicks by // calling out to the callback prop and then // turning the button off function doClick() { props.onClick(); setClicked(true); } // This part is pretty much the same, but a little // less cluttered without `this` return ( <button onClick={clicked ? undefined : doClick} disabled={clicked} > You Can Only Click Me Once </button> ); } 

How This Code Works

• When the component re-renders… won’t the state get re-created every time? How does React know what the old state was?
• Why do hook names have to start with “use”? That seems fishy.
• If there’s a rule about naming… does that mean I can make my own hooks?
• How can I store more complex state? I have to keep track of more than one value, you know!
• HOW CAN I USE THE HOOKS RIGHT NOW JSUT TELL ME

Why the Call Order Matters

function AudioPlayer() { const [volume, setVolume] = useState(80); const [position, setPosition] = useState(0); const [isPlaying, setPlaying] = useState(false); // < beautiful audio player goes here > } 

Step-by-step Example of Multiple useState Calls

1. React has just created the component. It hasn’t even called the function yet. It creates the metadata object, and the empty array of hooks. Let’s imagine that object has a property called nextHook and it’s set to 0. The first hook that runs will consume position 0.
2. React calls your component (which means it knows which metadata object to store the hooks in).
3. You call useState. React creates a new piece of state, puts it in position 0 of the hooks array, and returns your [volume, setVolume] pair with volume set to its initial value of 80. It also increments the nextHook index to 1.
4. You call useState again. React looks at position 1 of the array, sees that it’s empty, and creates a new piece of state. Then it increments the nextHook index to 2, and returns [position, setPosition].
5. You call useState a third time. React sees that position 2 is unfilled, creates the state, increments nextHook to 3, and returns [isPlaying, setPlaying].

1. React needs to re-render the component. Hello, old friend. React has seen this component before, and it already has metadata associated.
2. React resets the nextHook index to 0, and calls your component.
3. You call useState. React looks into its array of hooks at index 0, and sees that it already has a hook in that slot! No need to create one. So it advances nextHook to index 1 and returns [volume, setVolume] with volume still set to 80.
4. You call useState again. This time, nextHook is 1, so React checks index 1 of the array – again, a hook already exists, so it increments nextHook and returns [position, setPosition].
5. You call useState a third time. I think you know what happens by now.

1. Only call hooks at the top level of your function. Don’t put them in loops, conditionals, or nested functions. In order for React to keep track of your hooks, the same ones need to be called in the same order every single time.
2. Only call hooks from React function components, or from custom hooks. Don’t call them from outside a component (what would that even do?). Keeping all the calls inside components and custom hooks makes your code easier to follow too, because all the related logic is grouped together.
3. The names of hooks must start with “use”. Like useState or useEffect (well, not those two, those are taken).

function AudioPlayer() { // Extract these 3 pieces of state: const [volume, setVolume] = useState(80); const [position, setPosition] = useState(0); const [isPlaying, setPlaying] = useState(false); // < beautiful audio player goes here > } 

function usePlayerState(lengthOfClip) { const [volume, setVolume] = useState(80); const [position, setPosition] = useState(0); const [isPlaying, setPlaying] = useState(false); const stop = () => { setPlaying(false); setPosition(0); } const start = () => { setPlaying(true); } return { volume, position, isPlaying, setVolume, setPosition, start, stop }; }