React Grimoire
  • ⁉️Introduction
  • 🧑‍🎓🧑🎓 React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • 🪝React Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • 📓React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • 🔭Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • 🚀Deployment
    • In Progress
  • 🖼️Design system
    • 🏁What's a design system anyway ?​?
  • 🔗Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Concepts

Advanced Patterns

PreviousLifting State UpNextCompound Components Pattern

Last updated 2 years ago

In this Section i'll try my best to explain common react patterns used from React Gurus,code implementation, pros and cons of each, and specific usage with public libraries. Let's talk about it.

The actual contents comes from Epic React’s Advanced React Patterns Workshop.

If you have interests, you can check Epic React by Kent C. Dodds.

AS a React developer, you may have asked the following question at least once.

· How to develop reusable components that can be applied to various cases ?

· How to create a component that provides an easy-to-use and simple API ?

· What do you need to develop extensible components for both UI and functionality ?

These questions have been recurring since the past, and the React community has come up with some advanced patterns as answers to them.

building a Component for other developers. Therefore, the actor “clients” refers directly to these developers (And not the final user which will use your website/application).

The Final sand box with all the patterns

References and articles :

🔭
LogoAdvanced React Patterns 🤯
LogoPicking the right React component pattern | Ben IlegboduBen Ilegbodu
LogoPatternsupdate_me