useLimenscer([state,dispatch]]) 및 useContext를 사용하여 불필요한 리렌더를 피하는 방법

useLimenscer([state,dispatch]]) 및 useContext를 사용하여 불필요한 리렌더를 피하는 방법

다중 사용사용시 상태 렌더링의 일부를 사용하여 모든 구성 요소를 축소하십시오.

import React, { useContext } from 'react'
import Store from '../store'
import { setName } from "../actions/nameActions"

const Name = () => {
    const { state: { nameReducer: { name } }, dispatch } = useContext(Store)
    const handleInput = ({ target: { value } }) => { dispatch(setName(value)) }
    console.log('useless rerender if other part (not name) of state is changed'); 
    return <div>
        <p>{name}</p>
        <input value={name} onChange={handleInput} />
    </div>
}

export default Name;

어떻게 하면 이 쓸모없는 재생산을 피할 수 있을까?

만약useState또는useReducer상태 변경, 구성 요소 업데이트, 구성 요소 자체에서 이를 방지할 방법이 없음.

리렌더는 부분 상태에 의존하는 하위 구성 요소에서 다음과 같이 순수하게 만들어 방지해야 한다.

const NameContainer = () => {
    const { state: { nameReducer: { name } }, dispatch } = useContext(Store)
    return <Name name={name} dispatch={dispatch}/>;
}

const Name = React.memo(({ name, dispatch }) => {
    const handleInput = ({ target: { value } }) => { dispatch(setName(value)) }
    return <div>
        <p>{name}</p>
        <input value={name} onChange={handleInput} />
    </div>
});

NameContainerHAR에 다시 기록될 수 있으며 Redex와 동일한 목적으로 사용될 수 있음connect스토어에서 필요한 속성을 추출하여 연결된 구성 요소 소품에 매핑하는 방법.

참조URL: https://stackoverflow.com/questions/56368252/how-to-avoid-useless-rerender-using-usereducerstate-dispatch-and-usecontext