Code reusability
Higher Order Components
Comparison to Render Props and React Hooks:
https://medium.com/simply/comparison-hocs-vs-render-props-vs-hooks-55f9ffcd5dc6
HOCs pitfalls
Don’t Use HOCs Inside the render Method
Apply HOCs outside the component definition so that the resulting component is created only once. Then, its identity will be consistent across renders. This is usually what you want, anyway.
Docs: https://reactjs.org/docs/higher-order-components.html#dont-use-hocs-inside-the-render-method
Class Static Methods Must Be Copied Over
Docs: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over
When you use HOC or just wrap a component by a function, static methods are not being exposed by that HOC/function:
1 | // Define a static method |
How to solve: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over
Refs Aren’t Passed Through
If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
How to solve: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over
Types of HOCs
- Enhancers: Wrap a component with additional functionality/props.
- Injectors: Inject props into a component.
- Recommended article about: https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb
Render Props
Example
1 | interface InjectedCounterProps { |
Usage
1 | interface CounterProps { |
Issues of
- Firstly, there is an issue with separation of concerns with Render Props; if you wrap a component with a render prop in the same component, it will make it more difficult to test the two in isolation. May be fixed by creating more boilerplate code and creating separate component for what is rendered inside the render prop
- Secondly, as the props are injected in the render function of component, you cannot make use of them in the lifecycle methods
- Source: https://medium.com/@jrwebdev/react-render-props-in-typescript-b561b00bc67c
Render Prop vs HOC
- In the end, the tradeoff between HOCs and render prop components comes down to flexibility vs convenience. This can be solved by writing render prop components first, then generating HOCs from them, which gives the consumer the power to choose between the two.
- As far as TypeScript goes, there is no doubt that typing HOCs is much more difficult.
- Prior to React v16.8.0, I’d recommend sticking with render prop components for the flexibility and simplicity of typing, and if the need arises, such as building a reusable library of components, or for render prop components that are simple and/or widely used across a project, I would only then generate a HOC from them.
- in React v16.8.0, I would strongly recommend using hooks over both higher-order components or render props where possible, as they are much simpler to type.
- Source: https://medium.com/@jrwebdev/react-render-props-in-typescript-b561b00bc67c
React Hooks
FAQ
- Is there something like class instance variables so we won’t need to use state and rerender component?
useEffect()
Hook is the equivalent of both thecomponentDidMount()
andcomponentDidUpdate()
Custom Hook versus HOC
1 | import React, { useState, useEffect } from "react"; |
Use only Hooks for global state management
You can use useContext
and useReducer
to create a Redux-like store management in your app. Checkout https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c
1 | import { StateProvider } from '../state'; |
usage
1 | import { useStateValue } from './state'; |