Become Senior React Developer by Mastering 8 Design Patterns

REACT DESIGN PATTERNS

Become a Senior Developer.
What separate senior developer is not what code they write but how they write the code.
They use certain design patterns that makes the code easy to read, and understand and also they create small code files that makes it easier to maintain and collaborate with developers, while working together.

8 Design Patter Used By Senior Developers

1. Containers and presentation patterns.
2. Component composition with hooks.
3. State management with Redux.
4. Data management with providers
5. Component enhancement with HOC.
6. Compound components.
7. Prop combination.
8. Controlled inputs.

Containers and presentation patterns.

• Separates Business Logic and presentation logic
• Make use of Parent, Child Taxonomies
• Smaller and concise components
• Clean code
• Reusable UI detached from business logic

Component composition with hooks

• Isolate all stateful logic
• Make use of custom hooks
• No business Logic in
• Clean code
• Smaller files

State management with Redux.

• Handing many states in a component leads to issues.
• Reduce state variables.
• Use the useReducer hook.
• Avoid Redux
• Components don’t control state.

Data management with providers

• Utilizes the context API
• Props prop drilling
• Avoids messy, parent-child chain
• Single source of truth
• Components can access global state

Component enhancement with HOC.

• Takes in components as an argument
• Returns a supercharged component injected with data or functionality
• Encourages composition over inheritance
• Facilitates component reuse and code sharing

Compound components

• Breaks down the parents component into smaller components
• Manage the interaction between these smaller components with either props, context or state management
• When there is a need to create reusable, versatile components
• Clear and simple code structure

Prop combination

• Creates a single object out of several related props
• Pass it as a single prop to child components
• Clean code
• Simple to manage the props
• Reusable, versatile components
• Avoid passing lots of props

Controlled inputs

• Used to handle input field
• Use an event handler to update component state
• Store the current value of the input field in the component state
• Makes code more predictable and readable
• Utilizes one way data binding