Можно ли объявлять компоненты внутри других компонентов?

Question

[reivunxx]

Вот условно у меня есть такой по структуре код.
B - вспомогательный компонент, который например вызывается в map
у него может быть и C и D вложен внутри. И все они могут использовать родительские стейты

Вопрос собственно вот в чем: можно ли использовать такой код чтобы не плодить кучу пропсов для передачи стейтов и функций. И если нет, то хотелось бы разобраться почему.

P.s. - В реакте я новичок, поэтому буду благодарен за развернутый ответ

const A = () => {
    const [state, setState] = useState("");

    useEffect(()=>{
        setState('!')
    },[])
    
    const func = () => {
        //do something
    }

    const B = () => {
        const [stateB, setStateB] = useState(func);

        //...
        
        return <p>world{state}</p>
    }

    return <div>
        <p>Hello</p>
        <B/>
        {state}
    </div>
}

Comments

[Gary_Ihar]

Можно, но помни, что с дуру можно и *** сломать

Answer 1

[Alexandroppolus]

В принципе можно, но это очень плохая практика, я бы даже назвал это "антиреакт". На каждом рендере А у тебя будет абсолютно новый компонент В, значит вся его ветка будет перемонтироваться. Вместо аккуратного точечного обновления DOM, будет происходить удаление старой верстки и создание новой с нуля. Как если бы ты присвоил innerHTML. Только ещё медленнее - придется обходить удаляемое дерево, всё аккуратно размонтировать.

То есть по факту этот способ выкидывает в мусорное ведро все оптимизации, которые есть благодаря виртуальному дому.

Comments

[reivunxx]

А насколько плохо хранить константы которые используются только локально в компоненте так

const A = () => { 

    const func = () => {
        //do something
    }
    
}

И если не так, то какой подход использовать? Я что-то читал про мемоизацию и useCallback