React - Hooks

Hook

Definition

• A JavaScript function that takes a prop as an argument and returns a React element

Caution

• Hooks must be called at the top level of a React function component - Hooks cannot be called inside loops, conditional statements, or nested functions - Hooks can only be called within React functions

Types

useState

Definition

• React hooks for managing component state - You must always specify an initial value

How to Use

react const [current component variable, state update function] = useState(initial value)

//예시 const [userName, SetUserName] = useState[''];

//Get value

User name: {userName}

// Change the value SetUserName('Alpha');

• Initial values can be 0, true, '' or various other values - Values can be changed using the state update function (new value) - Values can be retrieved using the current component function

Caution

• Status updates are processed asynchronously.

  • Caution is required when the value of a new state depends on the current value.

  • Using the code above ensures the latest value is used - Starting with React 18, state updates are batch processed. If you don't want this, you can prevent batch processing using the flushSync API from the react-dom library.

useEffect

Definition

• A Hook that performs a specific task whenever a component is rendered - Examples include fetch requests, etc.

How to Use

• useEffect accepts two arguments: a callback function and dependencies. - Callback function: Contains the logic for secondary tasks. - Dependencies: An optional argument representing an array of dependencies. - Using the second argument, dependencies, prevents the code from running every time the component renders.
  • Passing an empty array as the second argument ensures the useEffect function runs only after the first render. - Example

react // Called after each render useEffect(() => { console.log("useEffect function executed") });

// Calls whenever the argument value changes useEffect(() => { console.log("useEffect function executed") }, [userName]);

// Only call during the first render useEffect(() => { console.log("useEffect function executed") }, []);

• Organization of Auxiliary Tasks

  • When no further processing is required, you can stop the operation by placing the function in the return value - Example

  react useEffect(() => { // Task to perform return () => { // Task completion logic } }, [count]};

  • The above code terminates the operation when the value of count changes.

useRef

Definition

• Hook that can reference values not needed for rendering - useRef returns a ref object with a single mutable property - Changing the value does not trigger re-rendering - Suitable for roles like storing and managing interval IDs or accessing DOM nodes - To change the internal value, you must manually modify the current property

• Caution - Do not use ref.current during rendering - Since it does not trigger re-rendering even when the value changes, use state in such cases.

How to Use

react // declaration const hookName = useRef(initialValue);

// Example of changing the value const intervalRef = useRef(1);

function handleRefVal() { const intervalId = seInterval(() => { //내부 내용 }, 10); intervalRef.current = intervalId; }

//Interval 취소 function handleStopRefVal() { const intervalId = intervalRef.current; clearInterval(intervalId); } ~~~

References

Understanding React's useState with Examples

React Hooks : useEffect() 함수

[React] Let's Dive Deep into useEffect Again

useRef