Stateful vs Stateless Components

When building out your React application you will encounter the need for numerous types of Components. There will most likely be a full fledged ‘InputForm’ component that will require various methods. It will most likely have several state changes and probably need access to your backend. Then there will be the very common ‘Title’ component, which will require no methods and may only need access to props in order to render successfully.

An example of a very basic InputForm Component is below:

class InputForm extends Component {
 constructor(props) {
  super(props);
  this.state = {
    value: '',
  };
  this.handleChange = this.handleChange.bind(this);
 }
 handleChange(event) {
  this.setState({ value: event.target.value });
 }
 
 render() {
  return(
   <div>
    <input 
      type='text'
      value={this.state.value}
      onChange={this.handleChange}>
    </input>
   </div>
  )
 }
}

As you can see, in this component we have established the state in the constructor function. State in React is reserved for inner component communication. In other words, State is a closure variable. It only exists inside on the current Components scope. That variable can be passed out of its current component, but when that happens it changes how we refer to it. Once state is passed into a component it becomes a prop because it is passed in through the properties of another component.

One way to think about this is inner dialogue. As people, we often think to ourselves. We can communicate to ourselves, change our opinions, construct new ideas, but in its essence those thoughts and ideas only exist inside of our mind. Only when we choose to share those thoughts with others do we vocalize those ideas. In this process of communication, we transfer our thoughts to someone else’s local scope. In their thought process, our ideas become props, or properties, passed in via another component, or person’s thought. Although we can choose to alter our state by the properties passed in, that action only occurs when we purposeful do so. If we choose to take no action our state remains unchanged.

This purposeful change that I’m referring to can be seen in the method setState(). Often used as this.setState() the method takes in the values, parameters, props, etc. that we want to change out state to and it assigns those values to the designated variable in our state. For example:

this.state = {
 tree: '',
}
this.setState({ tree: Redwood });

would result in:

console.log(this.state.tree) //Redwood

State can be very useful. As a best practice, when developing in React you try and avoid altering the state as much as possible. One caveat about ‘this.setState’ is that it is an asynchronous function. If you intend for your render statement to represent the updated value, you will need to insure the the asynchronous function has completed, prior to your render statement being called.

There are many cases in which we don’t want to capture state. Say we just want to alter the state of another Component. Maybe we want a function that prints out the username of an individual in large bold text at the top of our page. We’ve already captured the username in a separate component. Since we have no need to retain this information and we just want to make it bold, a stateless Component would be a great choice for rendering our desired outcome. We can have the username passed in as a prop and simply render this information in render our function. An example of that would look like this:

export default class Title extends Component {
 render() {
  return (
   <div>
    <h1>{this.props.username}</h1>
   </div>
  );
 };
};
//Here I am simply passing the value in as a prop to our component:
<Title username='tommy' />
//And to see how this is done using another components state:
<Title username={this.state.username} />
//when called within another component

As you can see in the example above, I have passed the username in as a prop to this stateless component. All it is doing is simply render the information. By placing our prop in H1 tags we have rendered it in large font to be displayed as a Title. Stateless components are very useful and can be seen splattered across React application everywhere. Another great example use case for a stateless component is if your information never needs to change. Say you wanted to post your logo in the top right corner. Your logo hopefully doesn't need to change very frequently and clearly would only want to be altered directly. In this case, you could create a stateless component that hard-codes the image of your logo into it and simply render wherever it is placed in your codebase.

For more examples of Stateful and Stateless component please see my website ComponentBase.