Buenas a todos,

Desde que empecé con React y empecé a manipular la metodología de Brad Frost me surgió la duda de cómo se debería de implementar correctamente.

Para poner un ejemplo de cómo lo estoy haciendo pondré un proyecto simple de ejemplo:

Empecé a crear los Atoms, los cuales reciben por sus Props sus atributos y valores. Por lo habitual las clases HTML5 de esos componentes también se envían por Props y se relacionan con algún Toolkit de estilos como lo es Bootstrap o Tailwind CSS.

Sin embargo, mi intuición me dijo que todos los Components deberían tener la flexibilidad de tener sus atributos y clases de estilos dinámicas, por lo que pensé pasarlas por Props.

Entonces por poner un caso pondré como ejemplo este Atom de Input:

import PropTypes from 'prop-types';

const Input = (
   {
       type, 
       name, 
       id, 
       className, 
       placeholder,
       disabled,
       onChange
   }
) => {
   return (
       <input
       type={type}
       name={name}
       id={id}
       className={className}
       placeholder={placeholder}
       disabled={disabled}
       onChange={onChange}
     />
   );
}

Input.propTypes = {
   type: PropTypes.string.isRequired, 
}

Input.defaultProps = {
   name: '', 
   id: '', 
   className: '', 
   placeholder: '', 
   disabled: false,
   onChange: undefined
}

export default Input; 

Ahora bien, luego de crear ese Atom vi un problema, y es que si todo lo recibo por Props significa que el Parent Component debería de pasarle esos Props. Es decir, el Particle debería de pasarle al Atom "Input" los Props. Ahora bien ¿Qué pasa si tengo más de un Atom y esa Particle también debe recibir Props?

Mi preocupación es que si todos los componentes reciben mediante Props sus valores entre más alto sea el Parent Component en el VirtualDOM, más tendrá parámetros que deberá pasarle a sus hijos.

Entonces, me gustaría saber la manera correcta de no tener un Props Hell.