React state and props

React JS has two main ways of keeping track of variable data in an application. These ways are called “state” and “props”.

The state could be said to be a component’s current condition, while props (short for “properties”) are state variables that are sent down to the children of that component.

A parent component (also called a “top-level”, or “smart” component) will take care of events and state changes, while child (or “dumb”) components only receive these states as properties and simply display them, without knowing exactly what they are used for.

I’ll get into the different types of components in a later post.

Changes in both props and state trigger rerendering of the component.

Props

Props are accessed through this.props, as in the following example:

class Header extends Component {
  render () {
     return (
       <div>
         <h1>{this.props.title}</h1>
       </div>
     )
   }
}

They are sent from the parent component as a property, in this case “title”:

<Header title={this.state.title}>

Props do not always have to be state variables, they can be strings:

<Header title={this.state.title} subtitle="Let's get started">

Now the Header component contains two props, one called title and one called subtitle.

  • Props are used when passing data and events to child components.
  • Props are immutable, that is, they should not be changed during the component’s lifecycle.
  • Being immutable, they are much easier for react to reference, which increases performance.

State

State is accessed through this.state.

this.state.title

The parent component has its state set:

constructor(props) {
    super(props);
    this.state = {
      title: "Some JS stuff"
    };
  }

This state can then be modified:

  componentDidMount(){
    this.setState({title: "Some React JS stuff"});
  }

And the the child component will always display the latest state of the parent component.

It is recommended that as few components as possible keep state in them, instead a top-level component should keep track of as much of the data and events as possible.

  • State is used for storing and changing data for the current component.
  • State is mutable, i.e. it can change during a component’s lifecycle.
  • Since it is mutable it is less efficient, which means it can slow down performance.
  • State cannot be accessed from child components unless they are passed down as props.

Complete example

Header.js

import React, { Component } from 'react';

class Header extends Component {
  render () {
     return (
       <div>
         <h1>{this.props.title}</h1>
         <h2>{this.props.subtitle}</h2>
       </div>
     )
   }
}

export default Header;

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Header from './Header';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "Some JS stuff"
    };
  }

  componentDidMount(){
    this.setState({title: "Some React JS stuff"});
  }

  render() {
    return (
      <div className="App">
        <Header title={this.state.title} subtitle="Let's get started">
      </div>
    );
  }
}

export default App;

Further reading

Leave a Reply

Your email address will not be published. Required fields are marked *