[{"id":"cG9zdDo1MDk=","slug":"a-practical-introduction-to-react-hooks","title":"A practical introduction to React Hooks","content":"\n

Since React 16.8 was published in February Hooks are now officially supported and the API finalised and stable. They arose around the idea of functional programming. In short: they allow to have state in functional components and with custom hooks (we’ll have a look at those later) they allow us to reuse and share state logic between multiple components. This article assumes a basic understanding of React.

\n\n\n\n

All the code shown can be found here: https://git.nicco.io/cupcakearmy/guide-react-hooks

\n\n\n\n

\n\n\n\n

What we will look at today

\n\n\n\n

Class Components vs Functional Components
Native React hooks
- useState
- useEffect
- useRef
Custom hooks
- useWindow
- useApi (The real power)

\n\n\n\n

1. Class vs Functional

\n\n\n\n

Let’s first have a look at the ‘hello world’ of react: A simple counter which we can increment or decrement.

\n\n\n\n

Class

\n\n\n\n

import React from 'react'\n\n\nclass SimpleClass extends React.Component {\n\n    constructor(props) {\n        super(props)\n        this.state = {\n            counter: 0,\n        }\n    }\n\n    componentDidMount() {\n        console.log('Lets goo 🚀')\n        setTimeout(() => this.setState({ counter: 5 }), 2000)\n    }\n\n    componentDidUpdate() {\n        console.log(this.state.counter)\n    }\n\n    render() {\n        return <div>\n            <div>{this.state.counter}</div>\n            <br/>\n            <button onClick={() => this.setState({ counter: this.state.counter - 1 })}>Decrease</button>\n            <button onClick={() => this.setState({ counter: this.state.counter + 1 })}>Increase</button>\n        </div>\n    }\n}

\n\n\n\n

Easy! Now we will convert the snippet above to the functional equivalent with the help of hooks.

\n\n\n\n

Hooks

\n\n\n\n

import React, { useEffect, useState } from 'react'\n\n\nconst SimpleFC = () => {\n    const [counter, setCounter] = useState(0)\n\n    return <div>\n        <div>{counter}</div>\n        <br/>\n        <button onClick={() => setCounter(counter - 1)}>Decrease</button>\n        <button onClick={() => setCounter(counter + 1)}>Increase</button>\n    </div>\n}

\n\n\n\n

Awesome 🚀 Simple enough right?

\n\n\n\n

2. Native React hooks

\n\n\n\n

useState

\n\n\n\n

Our constructor with state is gone and we have a simple const [counter, setCounter] = useState(0).

\n\n\n\n

How does this work? useState returns an array wich deconstructed gives us a getter and a setter. The parameter we pass to it is the initial value. That is all. Simple and useful.

\n\n\n\n

useEffect

\n\n\n\n

How about the timeout and the console.log? Welcome useEffect!

\n\n\n\n

useEffect takes a function and executes it every time the component updates. So it is basically componentDidMount and componentDidUpdate together.
The second parameter determines when the function will be triggered. It expects an array and checks whether the variables inside it change.
If no array is passed it will trigger every time the component gets updated and or mounted.
This means that you can pass props into the array and it will effect only when those change. Also, if you pass an empty array it will trigger only once and is equivalent to componentDidMount.

\n\n\n\n

useEffect(myFN)  // triggered every time the component gets updated\nuseEffect(myFN, []) // Only triggered\nuseEffect(myFN, [prop1, prop2]) // Gets triggered when either the props get changed

\n\n\n\n

In our example from above we would use it as follows:

\n\n\n\n

import React, { useEffect, useState } from 'react'\n\n\nconst SimpleFC = () => {\n    const [counter, setCounter] = useState(0)\n\n    useEffect(() => {\n        setTimeout(() => {\n            setCounter(5)\n        }, 1000)\n    }, [])\n\n    useEffect(() => {\n        console.log(counter)\n    })\n\n    return <div>\n        <div>{counter}</div>\n        <br/>\n        <button onClick={() => setCounter(counter - 1)}>Decrease</button>\n        <button onClick={() => setCounter(counter + 1)}>Increase</button>\n    </div>\n}

\n\n\n\n

useRef

\n\n\n\n

Now let’s have a look at useRef. We will have a normal class based component and the equivalent functional one with the help of hooks.

\n\n\n\n

Class

\n\n\n\n

class RefClass extends React.Component {\n    constructor(props) {\n        super(props)\n        this.myRef = React.createRef()\n        this.change = this.change.bind(this)\n    }\n\n    change() {\n        this.myRef.current.style.backgroundColor = '#6ba7ee'\n    }\n\n    render() {\n        return <div>\n            <button onClick={this.change}>Change Me</button>\n            <br/><br/>\n            <div ref={this.myRef} style={{ width: 50, height: 50, backgroundColor: '#000000' }}/>\n        </div>\n    }\n}

\n\n\n\n

Hooks

\n\n\n\n

const RefFN = () => {\n    const rect = useRef()\n\n    const change = () => rect.current.style.backgroundColor = '#6ba7ee'\n\n    return <div>\n        <button onClick={change}>Change Me</button>\n        <br/><br/>\n        <div ref={rect} style={{ width: 50, height: 50, backgroundColor: '#000000' }}/>\n    </div>\n}

\n\n\n\n

That is huge improvement in terms of amount code and most importantly readability. react.current points to the Dom element, which we can then modify at our will.

\n\n\n\n

As a side node: look how much cleaner we can have class functions. instead of needing binding the function to this, in functional components we just need to define them.

\n\n\n\n

3. Custom hooks

\n\n\n\n

This is where the real power lies. With custom hooks react allows you to reuse stateful logic and share it between components. Very powerful.
We will cover two examples:

\n\n\n\n

Window size
Consume an API

\n\n\n\n

Window size

\n\n\n\n

Assume you want to make a component dependent on the window size of the browser. With react hooks this is quick, easy and reusable.

\n\n\n\n

hooks.js

\n\n\n\n

export const useWindowSize = () => {\n    const getCurrentSize = () => ({ height: window.innerHeight, width: window.innerWidth })\n\n    const [size, setSize] = useState(getCurrentSize())\n\n    useEffect(() => {\n        const handle = () => setSize(getCurrentSize())\n        window.addEventListener('resize', handle)\n        return () => window.removeEventListener('resize', handle)\n    })\n\n    return size\n}

\n\n\n\n

component.jsx

\n\n\n\n

import { useWindowSize } from '../Hooks'\n\nconst Custom = ()=> {\n    const size = useWindowSize()\n\n    return <div>\n        Width: {size.width}\n        <br/>\n        Height: {size.height}\n    </div>\n}

\n\n\n\n

As we can see we created a custom hook called useWindowSize. We now can use our own hook inside of other components.

\n\n\n\n

Custom components are just arrow functions that use the native useState and useEffect and some custom logic you add.

\n\n\n\n

Note the return () => window.removeEventListener('resize', handle) inside the effect function. You can return a function in the effect function that will get called whenever the hook will be unmounted. This allows us to do cleanup. In this case we stop listening for window size changes. Neat 💪

\n\n\n\n

API Hook

\n\n\n\n

Last but definitely not least: API calls. I personally think this is where hooks really show their power. I’ll show you the code first and then explain.

\n\n\n\n

hooks.js

\n\n\n\n

export const useCallApi = (url) => {\n    const [data, setData] = useState()\n\n    const update = () => {\n        fetch(url)\n            .then(response => response.json())\n            .then(json => setData(json))\n    }\n\n    useEffect(() => {\n        update()\n    }, [])\n\n    return [data, update]\n}

\n\n\n\n

posts.jsx

\n\n\n\n

import { useCallApi } from '../Hooks'\n\n\nconst Posts = () => {\n    const [posts] = useCallApi(`https://jsonplaceholder.typicode.com/posts`)\n    const [users] = useCallApi(`https://jsonplaceholder.typicode.com/users`)\n    // ...\n\n    if (!posts) return <div>Loading 🕰</div>\n\n    return <div>\n        {posts.map((post, i) => <div key={i}>\n            <h3>{post.title}</h3>\n            <p>{post.body}</p>\n        </div>)}\n    </div>\n}

\n\n\n\n

What is happening? We created a custom hook that queries an API and returns the result. How? We pass a url to the hook and we get the data back.

\n\n\n\n

Internally the hook uses useState to save the results. It executes the update functions once (because the use effect has an empty array as second parameter).

\n\n\n\n

Now we can use the useCallApi hook in multiple components or many times inside the same component. Options are endless.

\n","status":"publish","date":"2019-05-03T15:24:33","modified":"2020-09-22T20:40:04","tags":{"nodes":[{"id":"dGVybToyNw==","slug":"hooks","name":"hooks","count":1},{"id":"dGVybTozMQ==","slug":"javascript","name":"javascript","count":3},{"id":"dGVybTo0Nw==","slug":"react","name":"react","count":3}]},"post":{"featured":{"srcSet":"https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-300x228.jpg 300w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-1024x780.jpg 1024w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-150x114.jpg 150w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-768x585.jpg 768w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-1536x1170.jpg 1536w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-2048x1559.jpg 2048w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-500x381.jpg 500w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-800x609.jpg 800w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-1200x914.jpg 1200w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-1500x1142.jpg 1500w, https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-2000x1523.jpg 2000w","altText":"","sourceUrl":"https://api.nicco.io/wp-content/uploads/2019/05/matt-artz-353210-unsplash-scaled.jpg"}}}]