React: When to use internal state vs. custom hook vs. render props vs. HOC

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:

<URLRestaurant>
    <Orders />
</URLRestaurant>

and

<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 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 are a good place to start.
• Custom hooks: Check out Steve Kinney's course on Frontend Masters - State Management in React
• Render props: React docs has a pretty clear example.
• Higher Order Components: Kent C Dodd's Advanced React Patterns Workshop, or my post 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.