React Hooks-여러 동적 구성 요소와 부모 상태 공유

저는 현재 Hooks로 React App을 만들고 있습니다. 어딘가에서 데이터를로드하고 한편으로는 데이터를 표시하고 다른 한편으로는 데이터를 대체하는 구성 요소 ( Clicker, ClickerDisplay )를 동적으로 생성 하는 구성 요소 ( View )가 있습니다.

앱은 기본적으로 작동하지만 내 관심사는 그것 의 성능 입니다. 내 상태는 100ms마다 업데이트되며 변경시 모든 것이 다시 렌더링되면 큰 오버 헤드가 될 것입니다.

변경해야하는 구성 요소 만 다시 렌더링 할 수 있습니까?

나에게 매우 추한 또 다른 것은 내 상태를 업데이트하는 방법입니다. setState([...state]);더 나은 방법이 있습니까?

사이드 노트 :

내 예제 코드에서 id는 현재 항목 속성을 하위 구성 요소로만 전달하고 있지만 전체 항목을 하위 구성 요소로 전달할 계획입니다.

또한 앱의 상태를 빌드하고 하나의 큰 JSON 개체에 저장해야하므로 상위 구성 요소에 기본 상태 를 유지하고 싶습니다 .

데이터

//Some Random Data
const things = [
    {
        "id": 0,
        "name": "thing 1",
    },
    {
        "id": 1,
        "name": "thing 2",
    },
    {
        "id": 2,
        "name": "thing 3",
    }
];

View.js

export default function View(props) {

    const tmp = things.map(item => {
        return { ...item, amount: 0 };
    });

    const [state, setState] = useState(tmp);

    //alternates the amount and updates the state
    function updateAmount(item, newAmount) {
        item.amount = newAmount;
        setState([...state]);
    }

    function createClicker(item) {
        const { name, amount } = item;
        return (<Clicker
            name={name}
            amount={amount}
            clicked={() => updateAmount(item, amount + 1)} />
        );
    }

    function createClickerDisplay(item) {
        const { name, amount } = item;
        return (<ClickerDisplay
            name={name}
            amount={amount} />
        );
    }

    return (
        <ul>
            {state.map(item =>
                <li>
                    {createClicker(item)} = {createClickerDisplay(item)}
                </li>
            )}
        </ul>
    );

}

Clicker.js

//component to alternate data
function Clicker(props) {
    const { clicked, name, amount } = props;
    return <button onClick={() => clicked(name)}>{name}: {amount}</button>;
}

ClickerDisplay.js

//component to display data
function ClickerDisplay(props) {
    const { name, amount } = props;
    return <span>{name}: {amount}</span>;
}