Hook

1.

2. Ví dụ

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import TextField from "@mui/material/TextField";
import { createTheme, ThemeProvider, styled }
 from '@mui/material/styles';
 import { green, red } from '@mui/material/colors';
import { Button } from "@mui/material";
 



const innerTheme = createTheme({
  palette: {
    mode: 'light',
   
  },
});



function App(props) {
  const [name, setName] = useState(props.name);
  const [surName, setSurName] = useState("Poppins");
  const width = useWindowWidth();

  useEffect(()=>{
    document.title = name+' '+surName;
  });


  function handleNameChange(e){
    setName(e.target.value);
  }
  function handleSurNameChange(e){
    setSurName(e.target.value);
  }

  return (
    <div>
       <ThemeProvider theme={innerTheme}>
      <TextField label="Name" 
      variant="standard"  onChange={handleNameChange}
      value={name}/>
      <br/>
       
          <TextField label="surName" 
        variant="standard"  onChange={handleSurNameChange}
        value={surName}/>
        <Button variant="contained" > {width} </Button>
    </ThemeProvider>
    </div>
  );
}

ReactDOM.render(<App name = "Mary" />, document.querySelector("#app"));

//First custom hook
function useWindowWidth(){
const [width, setWidth] = useState(window.innerWidth);
  useEffect(()=>{
    const handleSizeChange = ()=> setWidth(window.innerWidth);
    window.addEventListener('resize',handleSizeChange);
    return ()=>{
      window.removeEventListener('resize',handleSizeChange);
    }
  });
 return width;
}

3

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import TextField from "@mui/material/TextField";
import { createTheme, ThemeProvider, styled }
 from '@mui/material/styles';
 import { green, red } from '@mui/material/colors';
import { Button } from "@mui/material";
 

const innerTheme = createTheme({
  palette: {
    mode: 'light',   
  },
});

function App(props) {
  const name = useFormInput("Harry");
  const surName = useFormInput("Potter");
  const width = useWindowWidth();
  useDocumentTitle(name.value +" "+ surName.value);
 
  return (
    <div>
       <ThemeProvider theme={innerTheme}>
      <TextField label="Name" 
      variant="standard"  {...name}/>
      <br/>
          <TextField label="surName" 
        variant="standard"  {...surName}/>
        <Button variant="contained" > {width} </Button>
    </ThemeProvider>
    </div>
  );
}

ReactDOM.render(<App name = "Mary" />, document.querySelector("#app"));

//First custom hook
function useWindowWidth(){
const [width, setWidth] = useState(window.innerWidth);
  useEffect(()=>{
    const handleSizeChange = ()=> setWidth(window.innerWidth);
    window.addEventListener('resize',handleSizeChange);
    return ()=>{
      window.removeEventListener('resize',handleSizeChange);
    }
  });
 return width;
}
function useDocumentTitle(title){
  useEffect(()=>{
    document.title = title;
  });
}

function useFormInput(initialValue){
  const [value, setValue] = useState(initialValue);
 
  function handleChange(e){
    setValue(e.target.value);
  }
 
  return{
    value,
    onChange: handleChange
  };

}

4. useReducer

• use reducer là quản lý các state có liên quan đến nhau, giảm sự phụ thuộc giữa các values và optimize performance.

4.1 Cách dùng

Đầu tiên là khởi tạo trạng thái ban đầu: trạng thái ban đầu có thể có nhiều giá trị.

Sau đó chúng ta gom nhóm các hành động trong reducer.

Chúng ta có thể truy xuất state ban đầu qua biến state khai báo ở bước 3

Gọi các hành động của reducer qua dispatch

4.2 Cách hoạt động

Ta truyền vào dispatch một action: với mỗi loại hành động thì sẽ có cách thay đổi dữ liệu khác nhau.

Ví dụ khác: Ví dụ về việc thay đổi giá trị của button nhưng có thêm chức năng reset trạng thái

5. Use callback

6. Use memo

Trong trường hợp chúng ta có một xử lý phức tạp tốn thời gian trước khi render, để nâng cao hiệu suất chúng ta sử dụng use Memoization.

Khi giá trị tính toán có kết quả thì chương trình mới tiến hành render giá trị mới việc này đảm bảo nâng cao hiệu suất

7. use Ref

Ví dụ : khi chúng ta nhấn vào button focus thì chúng ta sẽ nhảy vào input.

8. useImperativeHandle

9 . useLayoutEffect

10. useDebugValue

11. useContext