Composición de componentes con React Context

Dure como 30 minutos leyendo todos los links de colocación posteados anteriormente, pero gracias a esa lectura en la práctica uno incluso puede adelantarse y de inicio saber como sería más óptimo.

Excelente curso Juan, me siento mejor profesional luego de cada video.

Necesito más de estos cursos! De casualidad hacia uno que otro componente así pero no era cociente de esto.

Quisiera hacer una consulta, más del lado buenas prácticas:

const {
    totalTodos,
    completedTodos,

    searchValue, 
    setSearchValue,

    error,
    loading,
    searchedTodos,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
} = React.useContext(TodoContext);

Yo ordene los valores por orden de aparición de componentes en la vista y los separe con un espacio para digamos tener visibilidad.
.
¿Cuál seria la mejor práctica cuando hay muchísimos valores para enviar con el useContext para mantener el orden y poder ubicarlos fácilmente ante cualquier cambio, etc?
.
Porque acá son 10-12 valores, pero donde crece imagino más.
.
Agradezco sus respuestas o links (no hay problema si tengo que leer en otro lado)

De las primeras clases del anterior curso de Introducción, Juancho dije que children era su favorita, intente adelantarme a lo que haría y dije: “acá tiene que ir {children}” y claro que sí jaja Que sencillez que tiene React.

Cuando todo funciona 🤩 🥳, me esta gustando React 👩‍💻

Este video me resolvió 1 mes de trabajo!

trate de hacerlo por mi mismo y asi me quedo

return(
<React.Fragment>
  <STCount total={total} completed={completed} />
  <STAdd onAdd={Add} />
    <STList>
       {loading && <p className="STLoading--text">Cargando...</p>}
       {(error && !loading) && (
	  		<p className="STError--text">
						Un error ha ocurrido, porfavor, reinicia la pagina
			  </p>}
       {items.map( target =>{
                    return (
                    <STTask 
                        key={target.id}
                        task={target}
                        completed={target.completed}
                        onComplete={Complete}
                        onDelete = {Delete}
                        onEdit = {setModal}
                        onIncomplete= {setModal}
                        id={target.id}
                    />)
                })}
      </STList>
//no se como se usa ReactDOM.createPortal asi que mande datos a un state modal y que agregara uno solo si me pueden explicar que se hace en este caso se los agradeceria
            {modal.modal && (
                <Modal>
                    {modal.modal == "delete" && (
                        <STIncomplete
                            onDelete={()=>{
                                Delete(modal);
                                setModal(false);
                            }}
                            onCancel = {()=>{
                                setModal(false);
                            }
                    }/>)}
                    {modal.modal == "edit" && (
                        <STEdit
                        task = {modal}
                        onSubmit={(task)=>{
                            Edit(task);
                            setModal(false);
                        }}
                        onCancel = {()=>{
                            setModal(false);
                        }}
                    />)}
                </Modal>
            )}
        </React.Fragment>
)

codigo en TodoHeader

import React from 'react';

function TodoHeader({children}) {
  return (
    <header>
      {children}
    </header>
  );
}

export { TodoHeader };

codigo en AppUI del header

        <TodoHeader>
        	<TodoCounter
          		totalTodos={totalTodos}
          		completedTodos={completedTodos}
        	/>
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
        />
      </TodoHeader>

Pero si tengo todo en un solo componente renderizando, cuando haga un cambio de estado me vuelve a renderizar todo, no seria poco efectivo?