컴포넌트 렌더링 vs. opacity

어제 도움을 받았던 코드:

state 값에 따라 컴포넌트 자체를 렌더링 할지 결정하기 vs. 컴포넌트는 항상 DOM에 위치시키되 state값을 prop으로 내려주어 opacity값으로 화면에 표시할지 결정하기

background-image가 중요한 역할을 하는 컴포넌트였기 때문에 초기에 후자의 방법이 더 적절했다. 전부 마운트 시켜서 이미지를 미리 로드한 뒤 opacity를 조절하면 컴포넌트를 새로 마운트 시키는 것에 비해 이미지 초기 로드 시간에 영향을 받지 않기 때문.

이 때, 부모가 내려주는 props를 자식 컴포넌트에서 useEffect와 useState로 한 번 필터했다. 사실 가장 흔한 패턴 중 하나인 것 같은데 다른 방법은 없는지 궁금해졌음.