React: When to use internal state vs. custom hook vs. render props vs. HOC
Tags: beginners, react
Published: 2020-07-14 11:45:06

As someone who picked up React after the introduction of hooks, one of the most confusing questions has been when/how to separate state. 

Here's a decision table that helps me decide which technique to use.

|Use| Internal State | Custom Hook | Render Prop | HOC | 
|---|----------------|-------------|-------------|-----|
|UI State|x| | | |
|Non-UI State| | x| | | 
|Re-use layout| ||x| | 
|Duplicate components| | | |x|

#### **UI State?** *Internal State*

Things like toggle on/off, showing dialogs/modals. Use internal `useState`.

#### **Not UI State?** *Custom Hook*

Things like users, data handling logic. Lift these out of your component by creating a custom hook. It'll allow your components to only deal with render/view logic.

> PSA: I don't recommend creating a custom hook for **every** Non-UI state related logic. Unless you like sifting through many similarly named files, and annoying your co-workers.

#### **Re-using layout?** *Render Prop*

An example of this would be a form layout that might be used to create multiple forms, but each with different child components.

Instead of duplicating the layout, using render props for each *section* can make for leaner components.

#### **Duplicate components?** *Higher Order Component* 

Deciding between hooks, and HOCs is a little more nuanced, but one flag I use to consider HOCs is when I have:

*2 (or more) components, rendering the same things, but with different internal hooks.*

For example, recently I found myself with 2 sets of components:

- `<UrlOrders/>` & `<UserRestaurantOrders/>`
- `<UrlLink/>` & `<UserRestaurantLink/>`
- `<UrlEditorProvider/>` & `<UserRestaurantEditorProvider/>`

Where the difference between each was that:

- `UrlComponent` fetched a restaurant from a route param
- `UserRestaurantComponent` fetch a restaurant for the authenticated user

Using HOCs allowed me to write it as:

```jsx
<URLRestaurant>
    <Orders />
</URLRestaurant>
```

and

```jsx
<UserRestaurant>
    <Orders />
</UserRestaurant>
```

Using the exact same `Orders` component, and reducing the number of overall components. 

For a more in-depth comparison between Hooks, and HOCs, check out Eric Elliot's [post](https://medium.com/javascript-scene/do-react-hooks-replace-higher-order-components-hocs-7ae4a08b7b58) on Medium.

### Sounds good, how do I implement these?

There are plenty of excellent resources that will go into much more detail than I possibly could. Instead of repeating them, here are some that I really enjoyed:

- **Internal State:** You're probably already doing this, if not,  React [docs](https://reactjs.org/docs/hooks-state.html) are a good place to start.
- **Custom hooks:** Check out Steve Kinney's course on Frontend Masters - [State Management in React](https://frontendmasters.com/workshops/react-state/)
- **Render props:** React [docs](https://reactjs.org/docs/render-props.html) has a pretty clear example.
- **Higher Order Components:** Kent C Dodd's [Advanced React Patterns Workshop](https://kentcdodds.com/workshops/advanced-react-patterns), or my [post](https://dev.to/sysdevmike/compound-components-and-implicit-prop-binding-in-ts-3oac) for doing it in Typescript.

> Final warning: Use this post as a guide, I didn't cover all the reasons, and the ones I listed are not hard-rules. Do **NOT** blindly apply each technique, or you'll risk unnecessarily introducing complexity to your app. *Start with internal state.*