How to use React Hooks

What is React Hooks?

The React can use ReactHooks from version 16.8.

Introducing Hooks

If you use React Hooks, you don’t need using class components. So you don’t need SFC(stateless functional component).
In conventional React component, the class component can use storing state, however, functional component can’t storing state.
But, To added React Hooks, you can handling state and also you can hook the lifecycle method in functional component.

In addition, React Hooks instead of Class Syntax because React Hooks is new another way.
If you have already Class code, you don’t need to rewrite new code.

The bellow code from the official site.

import React, { useState } from ‘react’;

function Example() {
    // Declare a new state variable, which we’ll call "count"
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
            Click me
            </button>
        </div>
    );
}

The state handling is completed in function.

The React Hooks has tow rules.
– You have to call Hooks at the top level, It can’t call Hooks inside loops, conditions, or nested functions.
– You have to call Hooks from React function components only, it can’t call Hooks from regular JavaScript functions.

Develop CRUD

The bellow code from Build a React To-Do App with React Hooks (No Class Components)

import React, { useState } from "react";
import "./App.css";

function Todo({ todo, index, completeTodo, removeTodo }) {
    return (
        <div
            className="todo"
            style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
        >
            {todo.text}
            <div>
                <button onClick={() => completeTodo(index)}>Complete</button>
                <button onClick={() => removeTodo(index)}>x</button>
            </div>
        </div>
    );
}

function TodoForm({ addTodo }) {
    const [value, setValue] = useState("");

    const handleSubmit = e => {
        e.preventDefault();
        if (!value) return;
            addTodo(value);
            setValue("");
        };

        return (
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    className="input"
                    value={value}
                    onChange={e => setValue(e.target.value)}
                />
            </form>
        );
    }

    function App() {
        const [todos, setTodos] = useState([
            {
                text: "Learn about React",
                isCompleted: false
            },
            {
                text: "Meet friend for lunch",
                isCompleted: false
            },
            {
                text: "Build really cool todo app",
                isCompleted: false
            }
        ]);

    const addTodo = text => {
    const newTodos = […todos, { text }];
        setTodos(newTodos);
    };

    const completeTodo = index => {
    const newTodos = […todos];
        newTodos[index].isCompleted = true;
        setTodos(newTodos);
    };

    const removeTodo = index => {
    const newTodos = […todos];
        newTodos.splice(index, 1);
        setTodos(newTodos);
    };

    return (
        <div className="app">
            <div className="todo-list">
            {todos.map((todo, index) => (
                <Todo
                    key={index}
                    index={index}
                    todo={todo}
                    completeTodo={completeTodo}
                    removeTodo={removeTodo}
                />
            ))}
            <TodoForm addTodo={addTodo} />
            </div>
        </div>
    );
}

export default App;

Hooks API

You can check Hooks API from the official site.
Hooks API Reference

関連記事