{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/react-state-management/","result":{"data":{"markdownRemark":{"id":"2149e011-27d4-59d7-9f86-b39f7d80de97","excerpt":"Biggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not sufficient to handle the…","html":"

Biggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not sufficient to handle the complexity which is why some developers use React hooks and others use state management libraries such as Redux.

\n

In this post, We are going to take a closer look at both React hooks and Redux to manage the state.

\n

What is React State Management?

\n

React components have a built-in state object. The state is encapsulated data where you store assets that are persistent between component renderings.

\n

The state is just a fancy term for a JavaScript data structure. If a user changes state by interacting with your application, the UI may look completely different afterwards, because it's represented by this new state rather than the old state.

\n
\n

Make a state variable responsible for one concern to use efficiently.

\n
\n

Why do you need React state management?

\n

React applications are built using components and they manage their state internally and it works well for applications with few components, but when the application grows bigger, the complexity of managing states shared across components becomes difficult.

\n

Here is a simple example of an e-commerce application, in which the status of multiple components will change when purchasing a product.

\n\n

If developers do not have scalability in mind then it is really hard to find out what is happening when something goes wrong. This is why you need state management in your application.

\n

Let’s discuss how to use react state management using react hooks and redux

\n

What is Redux?

\n

Redux was created to resolve this particular issue. it provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another. Here is a simple view of how Redux works.

\n

\n \n \n

\n

There are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does.

\n

Actions in Redux

\n

Actions are payloads of information that send data from your application to your store. Actions are sent using store.dispatch(). Actions are created via an action creator.\nHere is an example action that represents adding a new todo item:

\n
{ \ntype: "ADD_TODO", \npayload: {text:"Hello Foo"}\n }
\n

Here is an example of its action creator:

\n
ocnst addTodo = (text) => {\n  return {\n     type: "ADD_TODO",\n     text\n  };\n}
\n

Reducers in Redux

\n

Reducers specify how the application's state changes in response to actions sent to the store.\nAn example of how Reducer works in Redux is as follows:

\n
  const TODOReducer= (state = {}, action) => {\n  switch (action.type) {\n    case "ADD_TODO":\n      return {\n        ...state,\n        ...action.payload\n      };\n    default:\n      return state;\n  }\n};
\n

Store in Redux

\n

The store holds the application state. You can access stored state, update the state, and register or unregister listeners via helper methods.

\n

Let’s create a store for our TODO app:

\n
const store = createStore(TODOReducer);
\n

In other words, Redux gives you code organization and debugging superpowers. This makes it easier to build more maintainable code, and much easier to track down the root cause when something goes wrong.

\n

What is React Hook?

\n

These are functions that hook you into React state and features from function components. Hooks don't work inside classes and it allows you to use React features without writing a class.

\n

Hooks are backwards-compatible, which means it doesn't keep any breaking changes. React provides some built-in Hooks like useState, UseEffect and useReducer etc. You can also make custom hooks.

\n

React Hook Rules

\n\n

Please see the following examples of some react hooks as follows:

\n
What is useState and how to use it
\n

useState is a Hook that Lets you add React state to function components.\nExample:\nDeclaring a State Variable in class and initialize count state with 0 by setting this.state to {count:0}.

\n
class Example extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0\n    };\n  }\n
\n

In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component:

\n
function Example() {\n    const [count, setCount] = useState(0);\n}
\n

We declare a state variable called count and set it to 0. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call setCount.

\n
what is useReducer and how to use it
\n

useReducer is a hook I use sometimes to manage the state of the application. It is very similar to the useState hook, just more complex. useReducer hook uses the same concept as the reducers in Redux. It is basically a pure function, with no side-effects.

\n

Example of useReducer:

\n

useReducer creates an independent component co-located state container within your component. Whereas Redux creates a global state container that hangs somewhere above your entire application.

\n
          +----------------+              +----------------+\n          |  Component A   |              |                |\n          |                |              |                |\n          |                |              |      Redux     |\n          +----------------+              |                |\n          | connect Redux  |<-------------|                |\n          +--------+-------+              +--------+-------+\n                   |                               |\n         +---------+-----------+                   |\n         |                     |                   |\n         |                     |                   |\n+--------+-------+    +--------+-------+           |\n|  Component B   |    |  Component C   |           |\n|                |    |                |           |\n|                |    |                |           |\n+----------------+    +----------------+           |\n|    useReducer  |    | connect Redux  |<----------+\n+----------------+    +--------+-------+\n                               |\n                      +--------+-------+\n                      |  Component D   |\n                      |                |\n                      |                |\n                      +----------------+
\n

Below an example of todo items is completed or not using the useReducer react hook.

\n

See the following function which is a reducer function for managing state transitions for a list of items:

\n
 const todoReducer = (state, action) => {\n      switch (action.type) {\n        case "ADD_TODO":\n          return state.map(todo => {\n            if (todo.id === action.id) {\n              return { ...todo, complete: true };\n            } else {\n              return todo;\n            }\n          });\n        case "REMOVE_TODO":\n          return state.map(todo => {\n            if (todo.id === action.id) {\n              return { ...todo, complete: false };\n            } else {\n              return todo;\n            }\n          });\n        default:\n          return state;\n      }\n    };
\n

There are two types of actions which are equivalent to two states. they used to toggle the complete boolean field and additional payload to identify incoming action.

\n

The state which is managed in this reducer is an array of items:

\n
const initialTodos = [\n      {\n        id: "t1",\n        task: "Add Task 1",\n        complete: false\n      },\n      {\n        id: "t2",\n        task: "Add Task 2",\n        complete: false\n      }\n    ];
\n

In code, The useReducer hook is used for complex state and state transitions. It takes a reducer function and an initial state as input and returns the current state and a dispatch function as output

\n
 const [todos, dispatch] = React.useReducer(\n    todoReducer,\n    initialTodos\n  );
\n

Complete file:

\n
import React from "react";\n\nconst initialTodos = [\n  {\n    id: "t1",\n    task: "Add Task 1",\n    complete: false\n  },\n  {\n    id: "t2",\n    task: "Add Task 2",\n    complete: false\n  }\n];\nconst todoReducer = (state, action) => {\n  switch (action.type) {\n    case "ADD_TODO":\n      return state.map(todo => {\n        if (todo.id === action.id) {\n          return { ...todo, complete: true };\n        } else {\n          return todo;\n        }\n      });\n    case "REMOVE_TODO":\n      return state.map(todo => {\n        if (todo.id === action.id) {\n          return { ...todo, complete: false };\n        } else {\n          return todo;\n        }\n      });\n    default:\n      return state;\n  }\n};\nconst App = () => {\n  const [todos, dispatch] = React.useReducer(todoReducer, initialTodos);\n\n  const handleChange = todo => {\n    dispatch({\n      type: todo.complete ? "REMOVE_TODO" : "ADD_TODO",\n      id: todo.id\n    });\n  };\n  return (\n    <ul>\n      {todos.map(todo => (\n        <li key={todo.id}>\n          <label>\n            <input\n              type="checkbox"\n              checked={todo.complete}\n              onChange={() => handleChange(todo)}\n            />\n            {todo.task}\n          </label>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default App;
\n

Let’s do a similar example with Redux.

\n

Store in App.js.

\n
import React from "react";\nimport { Provider } from "react-redux";\nimport { createStore } from "redux";\nimport rootReducer from "./reducers";\nimport Todo from "./Components/TODO";\nconst store = createStore(rootReducer);\n\nfunction App() {\n  return (\n    <div className="App">\n      <Provider store={store}>\n        <Todo />\n      </Provider>\n    </div>\n  );\n}\n\nexport default App;
\n

Actions in actions/index.js.

\n
export const addTodo = id => ({\n  type: "ADD_TODO",\n  id\n});\n\nexport const removeTodo = id => ({\n  type: "REMOVE_TODO",\n  id\n});
\n

Reducers in reducers/index.js.

\n
const initialTodos = [\n  {\n    id: "t1",\n    task: "Add Task 1",\n    complete: false\n  },\n  {\n    id: "t2",\n    task: "Add Task 2",\n    complete: false\n  }\n];\nconst todos = (state = initialTodos, action) => {\n  switch (action.type) {\n    case "ADD_TODO":\n      return state.map(todo => {\n        if (todo.id === action.id) {\n          return { ...todo, complete: true };\n        } else {\n          return todo;\n        }\n      });\n    case "REMOVE_TODO":\n      return state.map(todo => {\n        if (todo.id === action.id) {\n          return { ...todo, complete: false };\n        } else {\n          return todo;\n        }\n      });\n    default:\n      return state;\n  }\n};\n\nexport default todos;
\n

FIle components/Todo.js

\n
import React from "react";\nimport { connect } from "react-redux";\nimport { addTodo, removeTodo } from "../../redux/actions/authActions";\n\nconst Todo = ({ todos, addTodo, removeTodo }) => {\n  const handleChange = todo => {\n    if (todo.complete) {\n      removeTodo(todo.id);\n    } else {\n      addTodo(todo.id);\n    }\n  };\n\n  return (\n    <ul>\n      {todos.map(todo => (\n        <li key={todo.id}>\n          <label>\n            <input\n              type="checkbox"\n              checked={todo.complete}\n              onChange={() => handleChange(todo)}\n            />\n            {todo.task}\n          </label>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nconst mapStateToProps = state => ({ todos: state.auth.todos });\nconst mapDispatchToProps = dispatch => {\n  return {\n    addTodo: id => dispatch(addTodo(id)),\n    removeTodo: id => dispatch(removeTodo(id))\n  };\n};\n\nexport default connect(\n  mapStateToProps,\n  mapDispatchToProps\n)(Todo);
\n

React offers react hooks which can be used as an alternative for connect(). You can use built-in hooks mainly useState, UseReducer and useContext and because of these you often may not require Redux.

\n

But for large applications, you can use both redux and react hooks. it works great! React Hook is a useful new feature, and the addition of React-Redux with Redux-specific hooks is a great step towards simplifying Redux development.

\n","headings":[{"value":"What is React State Management?","depth":2},{"value":"Why do you need React state management?","depth":2},{"value":"What is Redux?","depth":2},{"value":"Actions in Redux","depth":4},{"value":"Reducers in Redux","depth":4},{"value":"Store in Redux","depth":4},{"value":"What is React Hook?","depth":2},{"value":"React Hook Rules","depth":3},{"value":"What is useState and how to use it","depth":5},{"value":"what is useReducer and how to use it","depth":5}],"fields":{"slug":"/engineering/react-state-management/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"Learn about React state management and why we need state management and how to use it with React hooks and Redux in the best possible way.","title":"React state management: What is it and why to use it?","canonical":null,"date":"July 17, 2020","updated_date":null,"tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ef27359624480604211f0e018dd47f18/d9e4b/title-image.png","srcSet":"/static/ef27359624480604211f0e018dd47f18/f5f11/title-image.png 200w,\n/static/ef27359624480604211f0e018dd47f18/6d133/title-image.png 400w,\n/static/ef27359624480604211f0e018dd47f18/d9e4b/title-image.png 512w","sizes":"(max-width: 512px) 100vw, 512px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","bio":"She is a software enthusiast, an avid contributor, and a regular blog writer. She usually works with React, UI/UX, Javascript, Node.js, and DevOps.","avatar":null}}}},"pageContext":{"id":"2149e011-27d4-59d7-9f86-b39f7d80de97","fields__slug":"/engineering/react-state-management/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}