12. useDeferredValue

12.1. useDeferredValue란?

12.1.1. useDeferredValue 기본 설명

const deferredValue = useDeferredValue(value);

12.1.2 useDeferredValue 사용법

import React, { useState } from 'react';

export default function App() {
  let heavyArray = new Array(10000).fill(0);

  const [type, setType] = useState(0);

  const typeChange = (e) => {
    setType(e.target.value);
  };

  return (
    <div>
			<input type="text" onChange={typeChange} />
				{
				heavyArray.map(() => {
	        return <div>{type}</div>;
      })}
    </div>);
}

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

export default function App() {
  let heavyArray = new Array(10000).fill(0);

  const [type, setType] = useState(0);

  let deferredType = useDeferredValue(type);

  const typeChange = (e) => {
    setType(e.target.value);
  };

  return (
    <div>
			<input type="text" onChange={typeChange} />
				{
					heavyArray.map(() => {
	        return <div>{deferredType}</div>;
      })}
    </div>);
}

12.2 debounce

12.2.1 debounce란?

12.2.2 debounce 사용해보기

import { useState, useEffect } from "react";

function App() {
  const [value, setValue] = useState("");
  const [searchResult, setSearchResult] = useState([]);

  const findNumber = (value) => {
    const numberGenerater = Array(10000)
      .fill()
      .map((value, index) => index + 1);
    setSearchResult(numberGenerater.filter((num) => !(num % parseInt(value))));
  };

  useEffect(() => {
    if (value) {
      findNumber(value);
    } else {
      setSearchResult([]);
    }
  }, [value]);

  return (
    <div>
      <p>입력한 숫자의 배수를 찾아보아요~🎈</p>
      <form action="" onSubmit={(e) => e.preventDefault()}>
        <label htmlFor="">입력</label>
        <input
          type="number"
          placeholder="숫자를 입력하세요"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </form>
      <ul style={{ listStyle: "none" }}>
        검색 결과
        {searchResult.map((num, index) => (
          <li key={index}>{num}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

import { useState, useEffect } from "react";

function App() {
  const [value, setValue] = useState("");
  const [searchResult, setSearchResult] = useState([]);

  const findNumber = (value) => {
    const numberGenerater = Array(1000)
      .fill()
      .map((value, index) => index + 1);
    setSearchResult(numberGenerater.filter((num) => !(num % parseInt(value))));
  };

  useEffect(() => {
    const debounce = setTimeout(() => {
      return value ? findNumber(value) : setSearchResult([]);
    }, 500);
    return () => clearTimeout(debounce);
  }, [value]);

  return (
    <div>
      <p>입력한 숫자의 배수를 찾아보아요~</p>
      <form action="" onSubmit={(e) => e.preventDefault()}>
        <label htmlFor="">입력</label>
        <input
          type="number"
          placeholder="숫자를 입력하세요"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </form>
      <ul style={{ listStyle: "none" }}>
        검색 결과
        {searchResult.map((num, index) => (
          <li key={index}>{num}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

12.3 throttle

12.3.1 throttle이란?

12.3.2 throttle 사용해보기

import { useCallback, useRef, useState } from 'react';

const App = () => {
  const [raw, setRaw] = useState(0);
  const [throttled, setThrottled] = useState(0);
  const lastRan = useRef(Date.now());

  const handleOnMouseMove = useCallback(() => {
    setRaw((r) => r + 1);

    if (Date.now() - lastRan.current >= 1000) {
      setThrottled((t) => t + 1);
      lastRan.current = Date.now();
    }
  }, []);

  return (
    <div>
      <div
        style={{
          width: '100px',
          height: '100px',
          backgroundColor: 'rosybrown',
        }}
        onMouseMove={handleOnMouseMove}
      >
        트리거 영역
      </div>
      <p>일반 이벤트: {raw}</p>
      <p>쓰로틀 이벤트: {throttled}</p>
    </div>
  );
};

export default App;

if (Date.now() - lastRan.current >= 1000) {
  setThrottled((t) => t + 1);
  lastRan.current = Date.now();
}

12.4 useDeferredValue 사용해보기

.app {
    margin: 20px auto;
    width: 300px;
}

.input {
    width: 200px;
    font-size: 20px;
    background-color: sandybrown;
    border-radius: 5px;
}

.search-div {
    width: 200px;
    font-size: 15px;
    padding: 3px;
    border: 0.1px solid black;
    border-radius: 5px;
}

import React, { useState, useCallback } from 'react';
import './App.css';

export default function App() {
	const [name, setName] = useState('');
	
	const onChange = useCallback((e) => {
		setName(e.target.value);
	}, []);

	return (
        <div className='app'>
            <div>검색창</div>
            <input className='input' value={name} onChange={onChange} />
            {name
                ? Array(10000)
                      .fill()
                      .map((v, i) => (
                          <div className='search-div' key={i}>
                              {name}
                          </div>
                      ))
                : null}
        </div>
    );
}

import React, { useState, useCallback, useMemo, useDeferredValue } from 'react';
import './App.css';

export default function App() {
	const [name, setName] = useState('');
	const deferredName = useDeferredValue(name);
  const result = useMemo(() => deferredName, [deferredName]);

	const onChange = useCallback((e) => {
	  setName(e.target.value);
  }, []);

	return (
        <div className='app'>
            <div>검색창</div>
            <input className='input' value={name} onChange={onChange} />
            {deferredName
                ? Array(10000)
                      .fill()
                      .map((v, i) => (
                          <div className='search-div' key={i}>
                              {result}
                          </div>
                      ))
                : null}
        </div>
    );
}