Web apps in React JS are broken down into two main types of components, stateful and stateless, but what exactly is the difference and how does one decide which type to use and where? To understand the difference and better answer these questions, first one has to understand state as it relates to components in React.
State in React is really just imported data, that is more often shown in some way or another to the user of the app. This data might be entered into the app by the user his or herself or it may be imported from an API or database, but very likely, your user will be interacting with it in some way and therefore it is likely to be dynamic and subject to change.
This brings us back to our components, stateful components in React, as one might guess based on their name, have state, while stateless components do not. This means that stateful components are better suited to keep track of and display our app’s dynamic data, while stateless components are more often than not better suited to displaying more static information that they are given. In general, one can think of a stateful components as a components that may render slightly differently dependent on the data it is currently dealing with, while a stateless component will render always render in exactly the same way.
A great example of this might be a stateful component that holds an array full of objects representing movies. This component will render showing different movies based on which ones can be found in the array, possibly showing more or less of them depending on what the user is looking for. This movie data might be passed to an un-ordered or ordered list component that renders 10 list items each containing a different movie based on user search criteria. The component used for the list would very likely be a stateless component. This is because the list component doesn’t need to know the details of what movies are being displayed and why, it just knows that anytime it is rendered it will show 10 list items, containing some kind of content.