Рендер 5 раз, а нужно 1

Question

Как мне не получать console.log 5 раз, а только 1? Каждый раз вызывается рендер. Я понимаю, что нунжно использовать useCallback, но я не знаю, как

   const [src, setChar] = useState('');
    const [desc, setDesc] = useState('');
    const [name, setName] = useState('');
    const [temperament, setTemperament] = useState('');




useEffect(() => {
    cons();
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

const cons = () =>{
    setChar('123123123');
    setDesc('123123123');
    setName('123123123');
    setTemperament('123123123');
}


return (
    
    <>
        <section className="random-section">
            {src}
            {name}
            {temperament}
            {desc}
            {console.log('o')}
        </section>
    </>
)

Answer 1

Компонент с этим кодом будет рендериться два раза - первый раз при монтировании компонента, второй раз после того как отработает useEffect.

Остальные рендеры вызываются родительскими компонентами - когда рендерится родительский компонент, то и дочерние компоненты тоже будут рендериться.

По поводу большого количества рендеров переживать не нужно, React сам следит за тем поменялось что-то или нет и если ничего не поменялось то и перестраивать dom он не будет.

Можно создать мемоизировнную версию компонента, для этого нужно обернуть его в React.memo, но это имеет смысл делать для повышения производительности, а не для того чтобы просто избежать лишних рендеров.

БЛОГ НА HUSL

Рендер 5 раз, а нужно 1

Ответы (1 шт):