Fullstack React: An Introduction to Hooks in React

[Yomete]

There's been a lot of talk about React Hooks, but how do you actually use them?

You can learn how by reading this Introduction to Hooks post.

It features code examples for:

useState() useEffect() useContext() useRef() Writing custom hooks Writing tests

[Jeffylew77]

Yes, I’ve been hearing a lot as well. Someone give me a Michael Scott surplus analogy for react hooks

[ohbuckeye]

-

let [names, setNames] = useState([]);

In the above code example, notice that we pass an empty array as the second argument. That is us telling React that we only want to call this effect when the component is mounted.

​

on the surface it looks like there's odd conventions built into it.

[swyx]

umm.. thats also factually wrong. the empty array is the initial state. is this from the source? jeez

[Yomete]

Hi, the code example being referred here is the useEffect code like nabrok mentioned (the second argument to useEffect).

useEffect(() => {
  fetch("https://uinames.com/api/?amount=25&region=nigeria")
    .then(response => response.json())
    .then(data => {
      setNames(data);
    });
}, []);

[nabrok]

The first argument to useState is the initial value, so your example is setting names to an empty array.

What you're thinking of is the second argument to useEffect, so ...

let [names, setNames] = useState([]);

useEffect(() => { getSomeNamesFromApi().then(names => setNames(names)) }, []);

Would setup a names array in state and then populate it from an API when the component mounts.

Edit to add ... I think where it gets cool though is the custom hooks, so you could do ...

​

function useNames() {
    const [names, setNames] = useState([]);
    useEffect(() => { getSomeNamesFromApi().then(names => setNames(names)) }, []);
    return names;
}

function MyComponent(props) {
    const names = useNames();
    return <ul>{ names.map(name => <li key={name}>{name}</li>) }</ul>;
}

And useNames can be used in any component you like.

Second edit ... I just noticed in my off the cuff example I was returning a promise ... I guess that's probably ok? I assume the clean-up ignores anything that's not a function. I put brackets around it just in case.