function NoUpdateComponent() {
	const [count, setCount] = useState(0);

	const INFO = {
		name : '상훈',
		age  : 28
	};

	return (
		<div>
			<header>{INFO}</header>
			<ButtonComponent info={INFO}/>
		</div>
}

위 코드를 보면 “INFO” 라는 객체가 업데이트에 대한 로직이 들어가 있지는 않지만 값으로 이용되고 있고, “ButtonComponent” 에 props 로 값이 내려가고 있습니다.

따라서 해당 컴포넌트에서 “INFO” 객체를 트리거하고 불필요하게 참조하고 물고있게 되는 상황이 발생합니다. 따라서 이러한 변하지 않을 데이터 들은 컴포넌트 외부 파일에서 따로 관리하거나,

컴포넌트 외부에서 선언하여 사용하는것이 좋습니다

const INFO = {
	name : '상훈',
	age  : 28
};

function NoUpdateComponent() {
	const [count, setCount] = useState(0);

	return (
		<div>
			<header>{INFO}</header>
			<ButtonComponent info={INFO}/>
		</div>
}

요약 : 업데이트가 되지 않는 일반적인 객체나 상수라면 리액트 외부로 내보내기