Day 4 of the #100daysofCode Challenge. Learning React

STATEFUL OR STATELESS COMPONENTS WHICH ONE TO CHOSE AND WHY?

During my fourth day in my #100dayofCode journey I have been learning about stateful and stateless components and I decided to write an article about it.

The first question that comes to mind is what is state?
State is simply an object that hold information about a react Component. State is used in tracking changes that occur in a react Component and re-rendering it.

import React from "react";
import ReactDOM from "react-dom";

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(<Clock />, document.getElementById("root"));

The above example is a simple component that has state and we use the state to render output on the web page.

stateful and stateless components

What is a stateful component ?
Its is simply a class component as it has a state object initialized in the constructor and can change it own state.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

ReactDOM.render(<Counter />, document.getElementById("app"));

The above example is a stateful component as the component contains a state object initialized in the constructor.

stateless components

stateless components are simply functional components which have no state object.
stateless components just take information via props and and outputs it on the web page.

import React from "react";
import ReactDOM from "react-dom";
const Header = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
    </div>
  );
};

ReactDOM.render(<Header title="my App" />, document.getElementById("app"));

This simple example shows a stateless component which receives information via the props and displays it.

So I know you are asking when to use one over the other

when to use stateless components

1.When there is no interactivity needed

1. when there is need to reuse your code
2. when no state is required

when to use stateful components

1.when you want to pass data to the component for rendering
2.when you need interactivity in your web app

1. when taking in user data via input forms

Advantages of stateless components

1 Easy to understand - Stateless components are usually JavaScript functions which are easy to understand.
2.High performance - stateless components have high performance compared to stateful components as they don't have state and life cycle.
3.Stateless components reduce the code base size making the code to become clean and optimized.

This has been my fourth day learning react and is has been awesome and interesting.
cheers guys and happy learning.
Connect with me on twitter and lets talk about react