What is a Hook?

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t Work inside classes — they let you use React without classes.

State Hook

Official code example:

import React, { useState } from "react";

function Example() {
    const [count, setCount] = useState(0);

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

Code details:

  • In the Example component, we call the useState Hook to declare a state variable. The state variable is named count. The useState function passes in the initial value of count 0.
  • When the user clicks on the button, the setCount function is triggered, incrementing the value of count by one. React then re-renders the Example component using the new count value.

The official example is simple and easy for beginners to learn and understand. If setCount is triggered, React will re-render the Example component. Here’s an example I saw on Youtube.

So inside the Props we’re going to put functions

An example might be to create a blog Home that displays a list of created blogs (BlogList). The code for the two components is as follows, starting with the Home component:

import { useState } from "react";
import BlogList from "./BlogList";

const Home = () = > {
    const [blogs, setBlogs] = useState([
        {
            title: "My new website".body: "lorem ipsum...".author: "mario".id: 1}, {title: "Welcome party!".body: "lorem ipsum...".author: "yoshi".id: 2}, {title: "Web dev top tips".body: "lorem ipsum...".author: "mario".id: 3,}]);const handleDelete = (id) = > {
        const newBlogs = blogs.filter((blog) = >blog.id ! == id); setBlogs(newBlogs); };return (
        <div className="home">
            <BlogList
                blogs={blogs}
                title="All Blogs"
                handleDelete={handleDelete}
            />
        </div>
    );
};

export default Home;
Copy the code

Then there is a BlogList component:

const BlogList = ({ blogs, title, handleDelete }) = > {
    return (
        <div className="blog-list">
            <h2>{title}</h2>
            {blogs.map((blog) => (
                <div className="blog-preview" key={blog.id}>
                    <h2>{blog.title}</h2>
                    <p>Written by {blog.author}</p>
                    <button onClick={()= > handleDelete(blog.id)}>
                        delete blog
                    </button>
                </div>
            ))}
        </div>
    );
};

export default BlogList;
Copy the code

Start by analyzing the Home component

  • In the Home component, the author creates a blogs state variable and the corresponding setBlogs function. The initial value of blogs is the parameter passed in to useState.
  • React calls the BlogList component and passes the props object when rendering the Home component. The props object passed in here is:

{ blogs: {blogs}, title: "All Blogs", handleDelete: {handleDelete} }

Reanalyze the BlogList component

  • When the user clicks the Delete Blog button, the handleDelete function is triggered, which is passed from the Home component. The function parameter is blog.id. After the function is triggered, setBlogs is continued to be fired to change the blogs value. As the state variable changes, the Home component is re-rendered.
  • When the Home component is re-rendered, the BlogList component is also re-rendered, as the blogs value has changed, so the contents of the BlogList component have also changed. That is, after clicking Delete Blog and re-rendering, the blog is deleted.