Please enable JavaScript.
Coggle requires JavaScript to display documents.
React Patterns - Coggle Diagram
React Patterns
Prop Getters
Prop getters is a very unique pattern. This pattern involves the usage of spreading a function call in which we add our custom props and these are merged with the default props provided by the component.
-
-
you can avoid passing the number of props and just define it . And same props with different values should be used for multiple times.. this is best approach
-
Render Props Pattern
-
-
share the state or behavior that one component encapsulates to other components that need that same state.
Also almost all patterns implemented using HOC's can be easily converted to the Render Prop pattern.
it won't work with React.PureComponent naturally. As work around you have to pass function instance. Meaning const fun = (state) => return <component {...state}/>. render = {fun}
Prop collections
Prop Collection is a pattern where we can access props from the parent component by passing a single object of props.
define object of props which needs to used for components.. could be inside custom hook or any where which can be accessible
you can avoid passing the number of props and just define it . And same props with different values should be used for multiple times.. this is best approach
-
-
State Reducer
The reducer method which we write can be re-used in other components as we do not need to manage the state in our component.
all you want is to extend you API for state changes and keeping the current functionality untouched.
-
Custom Hooks
-
Hooks apply the React philosophy (explicit data flow and composition) inside a component, rather than just between the components.
-
-
-