React useState 후크를 사용한 지연 초기화 및 저장 함수

우리는 종종 앱에서 매우 간단한useState 후크를 사용합니다. 때때로 그것을 사용하면 약간의 성능 문제가 발생할 수 있습니다. 일부 시나리오에서 상태의 지연 초기화로 성능을 최적화하는 방법에 대해 몇 가지 시나리오를 살펴보겠습니다. 이 문서는 우리가 가장 좋아하는 후크useState를 통한 심층 분석입니다.
useState 후크는 콜백 함수를 수락할 수도 있습니다. 상태T 또는 유형의 상태를 반환하는 함수T를 수락할 수 있습니다. 여기서 T는 문자열, 숫자, 배열 또는 객체일 수 있습니다.

이것은 useState 후크의 서명입니다.

function  useState<T>(initialState: T | (() =>  T)): [T, Dispatch<SetStateAction<T>>];

useState 후크는 기본 수준의 useDispatch 후크를 추상화한 것입니다.

[state, setState] 함수를 사용하여 상태를 수정하는 [state, dispatch] 에서 가져온 useReducer로 dispatch를 생각할 수 있으므로 setState는 단순화된 dispatch 함수입니다.

게으른 상태 초기화:

React useState 후크는 콜백 함수를 초기 값으로 취할 수 있으며, 이를 상태의 지연 초기화라고 합니다.

이는 콜백 함수의 반환 값이 구성 요소가 처음에 마운트되고 렌더링될 때 해당 구성 요소의 수명 주기 동안 한 번만 상태를 설정한다는 것을 의미합니다.

const [state, setState] = useState<string>(() => {
    console.log("function call"); // this will log for only once in the lifecycle of the component
    const initialState: string = someExpensiveComputation(props);
    return initialState;
})
// This is called as lazy initialization of state 

팁:

콜백 함수에서 상태를 설정하려는 유형의 값을 반환해야 함을 항상 기억하십시오. 그렇지 않으면 때때로 uncontrolled components이 발생할 수 있습니다.

상태의 지연 초기화는 useDispatch(reducerFn, initialValue)를 통해 초기 상태를 전달하는 것과 유사합니다.

여러 하위 값이 포함된 복잡한 상태 논리가 있는 경우 일반적으로

useReducer가 useState보다 선호됩니다. 또한 콜백 대신 전달할 수 있기 때문에dispatch 심층 업데이트를 트리거하는 구성 요소의 성능을 최적화할 수 있습니다.

useState를 활용하는 사용자 지정 후크를 사용하거나 상태를 읽는 데 비용이 많이 들 때 편리하고 성능이 뛰어날 수 있습니다.

브라우저 localstorage 값의 상태를 관리할 때 상태를 읽는 데 비용이 많이 드는 시나리오를 생각할 수 있습니다.

// Here is a basic implementation of a custom hook for maintaining the state of localstorage value 

function  useLocalStorageState(key, defaultValue = "") {
    const [state, setState] = React.useState(() => {
        // We don't want to get our state value everytime from localstorage as it can take some time and lead to perfomance issues
        const  valueInLocalStorage = window.localStorage.getItem(key);
        if (valueInLocalStorage) {
            return  JSON.stringify(valueInLocalStorage);
        }
        return  typeof  defaultValue === "function" ? defaultValue() : defaultValue;
    });

    React.useEffect(() => {
        window.localStorage.setItem(key, JSON.parse(state));
    }, [key, state]);
    return [state, setState];
}

아래와 같이 다른 구성 요소에서 이 사용자 정의 후크를 호출할 때마다 초기 값을 initialValue로 설정하고 localstorage 값을 재정의하고 싶지 않습니다. 따라서 값을 느리게 설정하면 localstorage 값을 재정의하지 않고 이 상황에서 벗어날 수 있으며 값에 대한 localstorage 호출을 저장하여 앱의 성능을 높이는 데 도움이 됩니다.

let  storage = useLocalStorageName("keyName", initialValue);

useState 후크로 함수 저장:

네, 잘 들었습니다. useState 후크로 함수를 저장할 수 있습니다.
그러나 단순히 setState에 함수를 전달하는 것은 이 작업을 수행하지 않습니다. 콜백 함수에 함수를 반환해야 합니다.

const [myState, setMyState] = React.useState((x) => 5 * x);
// this don't set the myState to a function, remember Lazy initialization. in fact it is illegal to pass arguments to callback function for useState.

이렇게 하면 상태가 함수로 설정됩니다.

const [myState, setMyState] = React.useState(() => (x) => 5 * x);
// this will set the myState to a function.

함수를 콜백 함수로 전달하고 반환하면 상태가 함수로 초기화됩니다.

// Now we can use myState as a function 
let value = myState(10)
console.log(value)
// output: 50

console.log(myState(20));
// output: 100

함수로 상태 후크를 변경하려면 어떻게 해야 합니까?
초기화와 마찬가지로 state setter에 함수를 전달하는 것은 React에서 특별한 의미가 있습니다.

It is used when you want to compute the next state “reductively,”

const [count, setCount] = useState(initialCount);
setCount(prevCount => prevCount + 1) // increase the count by one
// passing a function to setCount will result in updating the previous state value with return value of the function with previous state value as an argument.

기능을 저장하는 상태를 변경하려는 경우 이렇게 하면

setMyState(() => (x) =>  2  * x)

이제 myState가 우리가 설정한 새 기능으로 업데이트되었습니다.

myState((10))
// output: 20

다음은 가지고 놀 수 있는 codesandbox입니다.

Although it is possible to store functions with useState hook don't abuse it, consider using useCallback hook for storing functions.

요약: state 값을 저장하는 방법과 react useState 후크로 함수를 저장하는 방법에는 미묘한 차이가 있습니다. 값을 반환하는 콜백 함수를 useState 후크에 전달하면 구성 요소가 처음 마운트되고 렌더링될 때 반환하는 값으로 상태가 한 번만 초기화됩니다. Lazy Initialization of state라고 합니다.

const [state, setState] = useState(() => {
console.log("function call"); // this will log for only once in the lifecycle of the component
return 'This is set for the first time'
})
// This is called as lazy initialization of state 

함수를 콜백 함수로 전달하고 반환하면 상태가 함수로 초기화됩니다.

const [multiplyState, setMultiplyFn ] = useState(() => x => 5 * x);  
const product = multiplyState(10); // product is 50
// Although it is possible to store functions with useState hook consider using useCallback hook for this purpose

// this won't store a function in the state
const [multiplyFn] = useState(x => 3 * x);  
const product = myMultiplier(10);