> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/state-management/managing-react-state.md).

# Managing React State

![](/files/-LjnzXwpOa2tkqvmdxbV)

## Using state initializer (Constructor | getinitialState )

Here we are talking about different ways to manage state of a react application like hooks in functional component and constructor in class based components  

```
function Counter() {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return <button onClick={increment}>{count}</button>
}
```

{% code title="State initilizers" %}

```
class Counter extends React.Component {
  state = {count: 0}
  /*
  Another way is 
  constructor(props){
    super(props)
    this.state = { count : 0 }
  } */
  increment = () => this.setState(({count}) => ({count: count + 1}))
  render() {
    return <button onClick={this.increment}>{this.state.count}</button>
  }
}
```

{% endcode %}

## Using Context API

This new API solves one major problem–**prop drilling**. Even if you’re not familiar with the term, if you’ve worked on a React JS app, it has probably happened to you. Prop drilling is the processing of getting data from component A to component Z by passing it through multiple layers of intermediary React components. Component will receive props indirectly and *you*

```
import MyContext from './MyContext';

class MyProvider extends Component {
    state = {
        cars: {
            car001: { name: 'Honda', price: 100 }
        }
    };
    render() {
        return (
            <MyContext.Provider
                value={{
                    cars: this.state.cars,
                    incrementPrice: selectedID => {
                    },
                    decrementPrice: selectedID => {
                    }
                }}>
                {this.props.children}
            </MyContext.Provider>
        );
    }
}
```

## Using Redux&#x20;

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).

You can use Redux together with [React](https://reactjs.org/), or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of add-ons available.

```
import { createStore } from 'redux'
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
let store = createStore(counter)
store.subscribe(() => console.log(store.getState()))
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })
```