useActionState

ใช้สำหรับจัดการสถานะของ action ในฟอร์ม (ยังอยู่ในขั้นทดลอง)

import { useActionState } from 'react-dom';

function MyForm() {
  const [state, action] = useActionState(someServerAction);
  // ใช้งาน state และ action
}

useCallback

ใช้สำหรับ memoize ฟังก์ชันเพื่อป้องกันการสร้างฟังก์ชันใหม่ในทุกๆ render

import { useCallback } from 'react';

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useContext

ใช้สำหรับเข้าถึงค่าใน Context

import { useContext } from 'react';

function MyComponent() {
  const value = useContext(MyContext);
  // ใช้งาน value
}

useDebugValue

ใช้สำหรับแสดงค่าสำหรับ custom hooks ใน React DevTools

import { useDebugValue } from 'react';

function useCustomHook(someValue) {
  useDebugValue(someValue);
  // logic ของ hook
}

useDeferredValue

ใช้สำหรับชะลอการอัปเดตค่าที่มีความสำคัญน้อยกว่า

import { useDeferredValue } from 'react';

function MyComponent({ value }) {
  const deferredValue = useDeferredValue(value);
  // ใช้งาน deferredValue
}

useEffect

ใช้สำหรับจัดการ side effects ใน functional components

import { useEffect } from 'react';

useEffect(() => {
  // ทำ side effect ที่นี่
  return () => {
    // cleanup function (ถ้าจำเป็น)
  };
}, [dependencies]);

useId

ใช้สำหรับสร้าง ID ที่ไม่ซ้ำกันสำหรับ accessibility attributes

import { useId } from 'react';

function MyComponent() {
  const id = useId();
  return <label htmlFor={id}>Label</label>;
}

useImperativeHandle

ใช้สำหรับกำหนด instance value ที่จะถูกเปิดเผยเมื่อใช้ ref

import { useImperativeHandle, forwardRef } from 'react';

const MyComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    someMethod: () => {
      // method implementation
    }
  }));
  // component logic
});

useLayoutEffect

คล้ายกับ useEffect แต่จะทำงานหลังจาก DOM mutations ทั้งหมดเสร็จสิ้น

import { useLayoutEffect } from 'react';

useLayoutEffect(() => {
  // ทำ side effect ที่นี่
  return () => {
    // cleanup function (ถ้าจำเป็น)
  };
}, [dependencies]);

useMemo

ใช้สำหรับ memoize ค่าที่คำนวณได้เพื่อหลีกเลี่ยงการคำนวณซ้ำที่ไม่จำเป็น

import { useMemo } from 'react';

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useOptimistic

ใช้สำหรับสร้าง optimistic UI updates (ยังอยู่ในขั้นทดลอง)

import { useOptimistic } from 'react';

const [optimisticState, addOptimistic] = useOptimistic(
  state,
  (currentState, optimisticValue) => {
    // return new optimistic state
  }
);

useReducer

ใช้สำหรับจัดการ state ที่ซับซ้อนด้วย reducer function

import { useReducer } from 'react';

const [state, dispatch] = useReducer(reducer, initialArg, init);

useRef

ใช้สำหรับเก็บค่าที่สามารถเปลี่ยนแปลงได้โดยไม่ทำให้เกิดการ re-render

import { useRef } from 'react';

const refContainer = useRef(initialValue);

useState

ใช้สำหรับเพิ่ม state ให้กับ functional components

import { useState } from 'react';

const [state, setState] = useState(initialState);

useSyncExternalStore

ใช้สำหรับอ่านและสมัครรับการเปลี่ยนแปลงจาก external store

import { useSyncExternalStore } from 'react';

const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

useTransition

ใช้สำหรับแยก state updates เป็นการอัปเดตที่มีความสำคัญน้อยกว่า

import { useTransition } from 'react';

const [isPending, startTransition] = useTransition();

startTransition(() => {
  // ทำการอัปเดต state ที่มีความสำคัญน้อยกว่าที่นี่
});