Container/Presentational Pattern

Enforce separation of concerns by separating the view from the application logic.

1. Presentational Component, that cares about how data is shown to the user.
2. Container Component, that cares about what data is shown to the user.

• ✅ separation of concerns: presentational component can be pure functions.
• ✅ Reusability
• ✅ Flexibility
• ✅ Testing
• ❌ not necessary with hooks: hooks make it possible to achieve the same result without having to use the C/P patterns, for example we can use SWR.
• ❌ overkill for smaller sized applications

Higher-Order Components

Pass reusable logic down as props to components throughout your application

• ✅ Separation of concerns
• ❌ Naming collisions
• ❌ Readability

Render Props Pattern

Pass JSX elements to components through props, Render props make it easy to reuse logic across multiple components.

 
function Input(props) {
  const [value, setValue] = useState("");
  return (
    <>
      <input value={value} onChange={(e) =>  setValue(e.target.value)} />
      {props.renderKelvin({ value: value + 273.15 })}
      {props.renderFahrenheit({ value: (value * 9) / 5 + 32 })}
	</>
  );
}
 
export default function App() {
  return (
    <Input
      renderKelvin={({ value }) => <div className="temp">{value}K</div>}
      renderFahrenheit={({ value }) => <div className="temp">{value}°F</div>}
    />
  );
}

• ✅ Reusability
• ✅ Separation of concerns
• ✅ solution to HOC problems
• ❌ Unnecessary with Hooks: Hooks changed the way we can add reusability and data sharing to components, which can replace the render props pattern in many cases.

Hooks Pattern

Use functions to reuse stateful logic among multiple components throughout the app

• ✅ simplifies components
• ✅ reusing stateful logic
• ✅ sharing non-visual logic
• ✅ good alternative to older react design patterns
• ❌ Rules of Hooks: Hooks require certain rules to be followed. without a linter plugin, it is difficult to know which rule has been broken, and you can accidentally end up using the wrong built-in hook.

Provider Pattern

Make data available to multiple child components

• ✅ scalability
• ❌ Performance: Components that consume the Provider's context re-render whenever a value changes. This can cause performance issues If you aren't careful which components are consuming the context.

Compound Pattern

Create multiple components that work together to perform a single task

• ✅ state management
• ✅ Single import
• ❌ nested components
• ❌ naming collisions

Resources

js & react patterns