#100DaysOfCode

Day 01: React Composition

Learned about the React composition, which is a development pattern based on React’s original component model where we build components from other components using explicitly defined props or implicit children props.

It is used to break complex components down into smaller components to enhance reusability.

If multiple components are using the same logic then it's time to separate that logic by creating a custom hook.

If we were to create different variations of a component then we would have to write the same logic with conditionals in each component. To avoid this we can create specialized container components.

1. Specialized components are built from accepted props to handle one specific case.

2. Container components provide the state and behavior of its children components.

To avoid prop drilling we can use React’s Context API, where we don’t have to pass the same prop to deeply nested components.

Reusability should be prioritized from the beginning of our development process to avoid duplication.

Article Source: https://formidable.com/blog/2021/react-composition/

#reactjs #frontenddev #webdev #javascript #learnreact