there are two approaches for reusability:
inheritance – basis for object-oriented programming.
composition – putting together bits of your code.
in React: composition over inheritance. this is the official recommendation from Facebook. video on ‣.
pillars of reusability in React:
(i) components w/ props
even for a simple hard-coded HTML component with no props, the benefit of React is that you only have to write that markup once, and you can reuse it as many times as you want.
(ii) React children
(iii) higher-order components
(iv) render props
both HOC's and render props can be replaced by hooks!
up to now we've been using self-closing components like <App />. what if we want to render different things inside the App component?
any component can be rendered as a self-closing or non-self-closing element. if it's not self-closing, whatever HTML is inserted between the tags is available to the component as props.children. the component that's given children can do whatever it wants with the children, including whether and how to display them.
if you want to give the caller of your component full control over what's displayed, just return {props.children} in your render method. otherwise, use props just as data and determine your own component's layout.
a function (component) that takes another function (component) as an argument, providing extra capabilities to it.
example HOC that just adds an extra favoriteNumber prop to the inputted component:
export function withFavoriteNumber(component) {
const C = component
return (props) => (
<C favoriteNumber={42} {...props}/>
)
}
did an example with a Toggle higher-order component. initially, we had two components that had toggle behavior using internal state, but the logic was duplicated between the components. we created a withToggle HOC that takes a given component and wraps it inside a <Toggle> component. the <Toggle> maintains toggle state and provides both the current value of the toggle and the handler for toggling (flipping the state) down as props to the child component. now the logic is shared and the child components can be purely functional.
passing down a function as a prop. specifically, a function that returns a React element. so basically, passing down a React component (a function that returns a React element) down as a prop.
the parent component chooses how to render data (by providing the render), while the child component determines what data to render (by calling the render and providing props to it).
equivalence between render props and HOC's – in render props, the "higher-order component" is the component that is receiving a render prop and passing data to it. it's the component that stores some shareable state and logic, and can render different things depending on the render prop it's passed.
render props make it clearer what you're exporting in your component file because you're no longer wrapping a component in something else right before you export it. (e.g. the typical export default withToggler(MyComponent) to add toggle state to MyComponent).
render props was not built into React, it just emerged as a common pattern among developers.