Hooked on React Hooks — useState So what’s all the rage with React hooks? I’ve been exploring it for the past few months and lets just say I really believe that this is what React has needed to surmount its position as the top front end framework. Let’s Get Setup! Setup your project as shown in this . post Then lets npm install --save react@^16.8.0 react-dom@^16.8.0 If your adding this to an existing codebase its super important to make sure that the react and react-dom versions are the same. We had some issues where if was throwing an error from the server side not recognising hooks. setState becomes useState Here we have a component ColourPicker. It toggles between the three colours chosen, with the default on red. import React, { Component } from 'react';

import './ColourPicker.css';

class ColourPicker extends Component {
    constructor() {
        super();
        this.state = {
            colour: 'Red',
        };
    }
    
    colourChoice = (colour) => {
        this.props.handleColour(colour);
        this.setState({ colour: colour });
    };
    
    render() {
        return (
            <div className="colour-picker">
                <p>
                    Colour:{' '}
                    <span className="picker-choice">{this.state.colour}</span>
                </p>
                <button onClick={() => this.colourChoice('Blue')} />
                <button onClick={() => this.colourChoice('Cyan')} />
                <button onClick={() => this.colourChoice('Pink')} />
            </div>
        );
    }
}
export default ColourPicker; When a button is clicked, it triggers the propped function handleColour from the parent component which will do something there. Now lets check out the React hooks refactor; import React, { useState } from "react";

import "./ColourPicker.css";

const ColourPicker = ({ handleColour }) => {
    const [colour, setColour] = useState("Red");

    const colourChoice = (colour) => {
        setColour(colour);
        handleColour(colour);
    };

    return (
        <div className="colour-picker">
            <p>
                {`Colour: `}
                <span className="picker-choice">{colour}</span>
            </p>
            <button onClick={() => colourChoice("Blue")} />
            <button onClick={() => colourChoice("Cyan")} />
            <button onClick={() => colourChoice("Pink")} />
        </div>
    );
};

export default ColourPicker; First thing we should notice is that we import useState at the top. This is how you import each hook that you want to use. Next you should notice this line; const [colour, setColour] = useState("Red"); This array destructuring is going to be the format we use the old setState with. There are three parameters we want to add in for every state we want to use, the name of the state, the function name of changing the state, and the state’s default value. const [stateName, setStateNameNewState] = useState(defaultValue); With this in mind, check out the function colourChoice that is called on click; const colourChoice = (colour) => {
    setColour(colour);
    handleColour(colour);
}; compared to the old colourChoice = colour => {
        this.props.handleColour(colour);
        this.setState({ colour: colour });
    }; As you can see its much nicer readable syntax. There is no need to always put in a key: value pair anymore, and notice the lack of this and this.props keywords! So much better! Stuff I Like — If everything is pure functions, having this consistency is great. This will make React easier to learn and understand. There’s nothing worse then when you start out learning trying to get your head around jsx syntax, then have it be recommended to write pure functions when you can mixing with the Class syntax. Consistent written components — Even with the simple example above, you can see how much space is saved, without compromising on the readability of the code. Extra destructuring is not needed. With larger apps, having no this, state, or props keywords can mean a lot more lines code saved which in turn can lead to less syntax and scoping mistakes. Better syntax — This should make code more readable and quicker to understand without all the necessary clutter Easier to understand, better readability Cons ? — Having this destructured format might be confusing for newer developers. However, React typically has a lot of newer ES6 features which are essential for a smoother experience. Weird / advanced syntax — Living in Javascript-land, this is a common thing. But I think it can get out of control, especially for new learners. It is quite common to find old deprecated solutions and then find out later down the line that you have done things incorrectly. Adds more ways of doing things Useful References There are some great docs about React and hooks, check out these awesome references if you wanna read more. The official React docs — https://reactjs.org/docs/hooks-intro.html Dan Abrov’s awesome blog — https://overreacted.io/ Examples of common components using hooks — https://usehooks.com/ Amazing illustration explanation of React (and other code related things) — https://illustrated.dev/ Next post we’ll check out how hooks deal with lifecycle hooks.

Super

Hooked on React's Array Destructuring Pattern

<Lets code! />

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Hooked on React Hooks — useState

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Hooked on React's Array Destructuring Pattern

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Hooked on React's Array Destructuring Pattern

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps