I recently took the JS / React patterns course on Frontendmasters by Lydia Hallie. Absolutely recommended to get an intro to the most common ones. Companion website here. There is a lot of stuff, so I summarised them here with their corresponding jsfiddles so I can remember them:
JS PATTERNS
1 - Modules pattern
Principle of encapsulation - only the exported stuff is visible in other modules and the rest is private to that module.
2 - Singleton pattern
Only one instance of the class or object exists and they should not be modifiable. We export the instance instead of the class, because an instance cannot be instantiated again.
Js Fiddle link singleton pattern with class
Js Fiddle link singleton pattern with object
3 - Proxy pattern
JS has a built-in Proxy object, see here. It accepts a target (the object) and a handler, which contains the get() and set(). When we access or modify a property, the get and set will intercept the accession and do whatever it is you do in the code.
4 - Observable pattern
The observer is just an array where you push functions when you subscribe them to the observable. notify iterates over the array and calls each function passing the data being notified. And then unsubscribe - if the function being unsubscribed matches the one in the array, remove it from the array.
Js Fiddle link observable pattern
5 - Factory pattern
A function that returns an object. You then create objects calling this function and passing parameters.
Js Fiddle link factory pattern
6 - Prototype pattern
The factory pattern can be memory inefficient, because if the object has methods, these are created each time a new object is created. This is where the prototype pattern is helpful - the methods in the class are shared among instances of the class and only defined once.
Js Fiddle link prototype pattern
REACT PATTERNS
1 - Container/Presentation pattern
I used this one all the time at work. The idea is that the data fetching is done at a parent component level, called container, and the data is passed down the the presentational component, who takes care of just the UI. This allows for easy testing and reusability (no matter the source of the data, it can be reused).
Codesandbox container/presentational pattern
2 - Higher Order Component (HOC) pattern
The HOC is a wrapper component that adds something on top of your component. It could be adding styles, a loading spinner, you name it. It is a function that accepts a component as an argument returns another function. This returned function accepts props as an argument and returns the component passed earlier on.
3 - Render prop pattern
Render props (props that render a component) are passed to a parent component. These props are a function that accepts something and returns a component. Then, in the child component, the render prop is called passing whatever argument is expected.
Codesandbox render props pattern
4 - Hooks pattern
Custom hooks are a way to make certain state logic available to components without having to write it all over again
Codesandbox hook pattern - example 1
Codesandbox hook pattern - example 2
5 - Provider pattern
React's provider is a way to make data available to only the components that consume it and avoid prop drilling. Data is shared via something called a Context Provider and can be "reached" via a Context consumer or useContext hook.
6 - Compound pattern
Right, this is hard to explain because I also need to wrap my head around it (:. So we have a wrapper stateful component that works in sync with child components that consume this state via Context Provider consumer. Hope the sandbox below clarifies.
Top comments (0)