react v18 UseTransition, useDeferredValue hook

인생 공병 줍기로 끝날 수 있다! 열심히 하자!😂

https://ko.reactjs.org/docs/concurrent-mode-patterns.html#wrapping-setstate-in-a-transition

컨커런트 UI 패턴 (실험) – React

codingapple 강의(https://www.youtube.com/watch?v=wZiOGxOhJNs)를 참고하였다.

state의 변경에 따른 rerendring 할 component가 많아 즉각적 반응으로 속도에 문제가 생길 때 사용한다.

말이 많이 이상하다.

위 강의대로 input의 값이 변경되면 10,000개의 div에 값을 출력할때 즉각적인 반응이 아닌 입력 완료 후 출력이 된다.

useTransition() 호출은 startTransition 그리고 isPending 두 값을 반환한다

isPending은 말 그래도 transiton이 pending(대기)인지 상태 값(Boolean)을 나타내고, startTransition으로 state변경 함수를 감싸주면 된다.

언제 볼지 모르나 참고로 기록해 둔다.

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useState, useTransition} from "react";

function App() {
    let [name, setName] = useState('');
    let arr = new Array(10000).fill(0);
    let [isPending, startTransition] = useTransition();    
    return (
        <div className="App">
            <input type="text" onChange={(e) => {
                startTransition(()=>{
                    setName(e.target.value)
                })
            }}/>
            {
                isPending?<p>loading</p>:
                arr.map((v, i) => {
                    return <div key={i}>{name}</div>
                })
            }            
        </div>
    );
}

export default App;

 

useDeferredValue()는 말 그래도 지연된 값의 사용?으로 보면 되겠다.

rendeing에 지연이 발생해야만 동작한다.

useDeferredValue에 적용할 state를 parameter로 넘기고, redering을 그 변수로 하면 된다.

입력이 모두 끝난 후에 적용이 되는 것을 확인했다.

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useDeferredValue, useState} from "react";

function App() {
    let [name, setName] = useState('');
    let arr = new Array(10000).fill(0);
    let deferredName = useDeferredValue(name,{timeoutMs: 10000});
    return (
        <div className="App">
            <input type="text" onChange={(e) => setName(e.target.value)}/>            
            {
                arr.map((v, i) => {
                    return <div key={i}>{deferredName}</div>
                })
            }
        </div>
    );
}

export default App;