Tìm hiểu về useState và useEffect trong NextJS.

Tìm hiểu về useState và useEffect trong NextJS.

I. useState

Giới thiệu :

  • Là 1 hook cơ bản của reactJS
  • Giúp mình có thể dùng state trong functional component.
  • cho phép chúng ta khai báo local state trong Function Component cách mà trước để chỉ dùng cho Class Component

Khai báo

    import React, { useState } from 'react'; // thư viện

    // khai báo
    const [state, setState] = useState(initialStateValue)

Trong đó:

  • state: tên định nghĩa của state, có thể là object hoặc đơn giá trị )
  • setState : function thực hiện update state
  • initialStateValue: giá trị ban đầu của state

Ví dụ : ở đây , mình có dùng useState để tạo 1 input value đơn giản

import { useState } from "react";

export default function Home() {

    const [value, changeValues] = useState([]);

    console.log(value);

    return(
        <>
            <h1>Nhap gia tri</h1>
            <input name='value' value={value} onChange={event => changeValues(event.target.value)}></input>
        </>
    )
 }

Đầu tiên , khai báo 1 state với value và changeValues . Sau đó tạo 1 form input với value = {value} và sự kiện onChange set các giá trị thay đổi trong input -> value thông qua changeValues, sử dụng console.log(value) và ta có kết quả sau:

II , UseEffect

Giới thiệu

  • useEffect cũng là 1 hook của React
  • mục đích useEffect để quản lý vòng đời của của một component và nó phục vụ chúng ta sử dụng trong function component thay vì các lifecycle như trước đây trong class component.

Cách sử dụng

    import React, {useEffect, useState} from 'react';

    export default function Home() {

        const [todo, setTodo] = useState({job: 'name', active: 'active'});

        useEffect(() => {
            console.log('number call');
            setTodo({job:'Dev', active: 'PHP'});
        });

        return(
            <div>
              <h1>Day la todo app</h1>
              <h3>Name: {todo.job}</h3>
              <h3>Family Name: {todo.active}</h3>
            </div>
        );
     }

Ví dụ ở trên , mình có xét các giá trị cho state todo với job và active, nếu không gọi effect thì giá trị của mình sẽ được gắn mặc định với job : name và active : active , khi gọi hành động effect , nó sẽ xét job và active các giá trị như trên , nhìn kết quả

nhưng hãy bật console lên , và nhìn

nó call liên tục đến effect và kiểu gì nó gây lag máy cực mạnh , vậy thay đổi nó kiểu gi

    useEffect(() => {
        console.log('number call');
        setTodo({job:'Dev', active: 'PHP'});
    }, [todo.job]);

thêm 1 tham số thứ 2 của hàm useEffect, đây cũng chính là tham số điều khuyển hàm .

Như vậy hàm useEffect() chỉ được gọi 2 lần: 1 lần khi render components, 1 lần khi set job thành "Dev".

Hoặc nếu chỉ muốn gọi một lần , hãy làm như sau

    useEffect(() => {
        console.log('number call');
        setTodo({job:'Dev', active: 'PHP'});
    }, []);

Tổng kết

Bài viết này mình xin góp chút kiến thức nhỏ giới thiệu những kiến thức mình biết về useState và useEffect. Nếu có điều gì cần góp ý cho mình, anh em vui lòng để lại comment nhé.
Cảm ơn anh em đã dành thời gian đọc bài viết.