Stateless vs Stateful- React

Nature
Photo by Nikola Majksner on Unsplash

In order to understand Stateful and Stateless, you need to understand what state is. State represents the parts of the app that can change and render information dynamically to the page. If you add a blog post to a page when you click view all, you like to a page, or see the change in time; all of these require state. It requires changing bits of data.

If we wanted to set the state of a clock we could do so dynamically using this.state = {date: new Date()}.

Clock state example
Clock state example
From Reactjs docs

In knowing this, we discuss Stateful or Stateless. Stateful components are ones that add functionality to the UI. A “like” button, a ticking clock, an input box. Each of these elements takes state, (changing bits of data) and uses it to render elements to the page. This is a stateful component. Stateless components are components without state. They are simply rendering something to the screen. They are the post without data, they are the structure of the elements without dynamic elements coming in.

For more information see- https://reactjs.org/docs/state-and-lifecycle.html