Introduction

This article explains what a state is, the life cycle methods of a react component and the use cases of state management.

What is a state?

The main job of React is to take your application state and turn it into DOM nodes.

The key philosophy behind React state is DRY: Don’t Repeat yourself. Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand.

Let's talk about what is not a state in React,

React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for newbies to understand.

To conclude, State is created in the component and stays in the component. It can be passed to children as its props.

class ParentComponent extends Component {
    state = { count: 0 }
    render() {
        const {count} = this.state;
        return (
            <div>
                <h2>This is my state: { count }</h2>
                <ChildCompoenent count={count} />
            </div>
        )
    }
}

class ChildCompoenent extends Component {
    render() {
        const { count } = this.props;
        return (
            <p>This is my props: { count }. </p>
        )
    }
}

What are the lifecycle methods of a react component?

Lifecycle diagram of React Component

Reference: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

In this article, I will be covering the most commonly used lifecycle methods which. For details on other methods please refer to this article.

The following are three major phases for a React component:

Mounting

The following methods are called when an instance of a component is being created and inserted into the DOM in the same order.

constructor(props) {
    super(props);
    this.state = {
        count: 0
    };
}
static getDerivedStateFromProps({ counter }) {
    return { count: counter + 1  };
}
render() {
  const {count} = this.state;
  return (
      <div>
          <h2>This is my state: { count }</h2>
          <ChildCompoenent count={count} />
      </div>
  )
}
componentDidMount() {
    axios.get("htttp://getcurrenttimeinutc.com", {
        params: {
            format: "minutes"
        }
    })
    .then((data) => {
        this.setState({
            counterStopsAt: data.time 
        })
    })
    .catch((error) => {
        //log error
    })    
}

Updating

The following methods in this phase are called when an update happens to props or state in the same order.

shouldComponentUpdate(nextProps, nextState) {
    return this.props.id == nextProps.id ? false : true
}
componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

UnMounting

The following method is called when a component is being removed from DOM.

Why and when do we need state management?

Let's start by understanding the different types of state for a Web Application.

 

Reference for the above classification: Front End Masters Course for React-State by Steve Kinney

The user input in one component can affect other components and vice versa. Controlling the flow of data and making sure that all user interface components update accordingly is an error-prone task. In addition, if the components count is high then the maintainability and readability of Code will decrease as you end up passing handlers and state to parent and child components. That's where State Management tools come to the rescue to solve the above problem.

There are quite a few state-management tools out there. Each of the tools solves a unique problem. A few of them are listed below:

  1. Flux
  2. Redux
  3. Redux-Saga
  4. Redux-Thunk
  5. Contexts API

I will be talking more about these tools in my future articles.