Discuss: React Hooks and Life After the Container-Component Pattern
Tags: react, beginners, javascript, discuss
Published: 2019-11-15 15:19:16

---
title: Discuss: React Hooks and Life After the Container-Component Pattern
published: true
cover_image: https://vignette.wikia.nocookie.net/disney/images/f/fb/Peterpan-disneyscreencaps-5319.jpg/revision/latest?cb=20131029090239
description: When should I move on? 
tags: react, beginners, javascript, discuss
---

I'm late to the party; I've been working with React for roughly 4 months and trying to build a project with Typescript and Redux. This past July, it seems like the core React team announced hooks and selector functions was the way to go. 

Just so we're all on the same page with what I'm talking about, this [LogRocket post](https://blog.logrocket.com/how-to-convert-your-existing-redux-containers-to-hooks/) describes the container component pattern as:
<blockquote>
"...containers are the components connected to the Redux store using the `connect()` method. These containers get some part of global state as props ...and a dispatch method to initiate changes in global state."
</blockquote>

I have been watching those Dan Abramov tutorials on [lifting state](https://reactjs.org/docs/lifting-state-up.html) and Egghead's React-Redux over and over.

At my last workplace everything was written in the container component pattern with `connect()` and React Redux. In an attempt to prove I can consolidate what I learned and couldn't learn, I'm trying to build a front end oriented [expense splitter app](https://github.com/usrrname/expense-splitter) (WIP, and any comments are welcome!).

Welcome to Hell when I try to get the value out of an input:
<sub>because the property value is buried 2 layers deep, nested in an array of objects.</sub>

```
handleItemChange = (event: any) => {
    const { parentNode, value, name } = event.target;

    this.setState((prevState: State, props: Props) => {
      return {
        items: items.map(item => {
          if (parentNode.id === item.id) {
            if (name === 'name') {
              item.name = value;
              return {
                ...item,
                name: prevState.inputValue
              }
            }
            if (name === 'cost') {
              item.cost = value;
              return {
                ...item,
                cost: Number(prevState.inputValue)
              }
            }
          }
        }
        )
      }
    })
  }
```

I've heard that the above method is not optimal because:
- `this.setState()` only works on changing the first level of the state object.
- inline action methods like `onHandleChange()` are taking up a lot of lines
- more experienced devs prefer to use a state immutability lib such as Immer.

In theory, here are some cases for hooks:
- hooks gives you direct access to the state from wherever in the app
- hooks allow state to be used in functional components so that business logic isn't limited to class components.
- `useEffect` will [replace lifecycle methods](https://reactjs.org/docs/hooks-overview.html#effect-hook) such as `componentDidMount` and `componentWillUnmount`, in short, saving lines of code and redundancy in having to write the ["cleanup"](https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup) code...

So, now that I've tried lifting state the hard way, how should I go about refactoring for the better? Where do I start? 

Context API with `useState()`?
{% link https://dev.to/iamdammak/react-hook-usestate-with-react-context-api-3pco %} 

To keep using `connect` with `useSelector`, as demonstrated in this [YouTube tutorial](https://www.youtube.com/watch?v=oKvF8jcSwIg)?

{% link https://dev.to/aliyalewis/intro-to-hooks-516b %}

Write my own reusable hooks?
{% link https://dev.to/craigmichaelmartin/hooks-for-those-who-know-react-3n89 %}

Fellow devs, I'd like to know:
- Have you switched over to hooks? Why or why not?
- How do you typically deal with updating a property of the state object that's nested several levels deep?
- Following from the previous question: how do you manage shared state?
- Let's say you are building an app for a pizza shop. Your inventory is updated by one reducer, and the user info is handled by a different reducer. What would you do when a property like updating or cancelling a user's order requires *both* states? (In Typescript, I would imagine I would create a `type OrderState` that includes both... but isn't that duplicating a lot of data that's already in the App state?) 


Recommended Reading
[Presentational-Container pattern](https://www.patterns.dev/posts/presentational-container-pattern/)
[Making Sense of React Hooks](https://dev.to/dan_abramov/making-sense-of-react-hooks-2eib)
[Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)
[Blogged Answers: Thoughts on React Hooks, Redux, and Separation of Concerns](https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/)