Please enable JavaScript.
Coggle requires JavaScript to display documents.
Advanced React Patterns (Compound Components (let the consumer arrange or…
Advanced React Patterns
Compound Components
-
-
these sub-components usually implicitly share the state of the parent component like <Toggle.on /> will be aware about the state of <Toggle /> even though the consumer does not pass anything explicitly
-
Render Props
-
so we create components with no presentational aspect. we only share the state machine to the consumers
-
-
Flexible states
-
we can allow the consumers of the components to sign off all the state changes possible in the component
-
-
-
Share state
If we have to broadcast state through our React component app tree, we can use <Provider /> pattern
there are certain pieces of state like app language or theme which is global to the app will likely benefit from this
-
-
-
The component model of React helps us to think about reusability in different lights – particularly the degree of flexibility that can be afforded to the consumer.
These patterns are an exploration into expanding the definition of reusability beyond just reusing the components as they are, with mere change in the prop values.
A component is an amalgam of state and presentation.
Reusability is using one of them or both of them or composing them to build new abstractions.