Today we will talk about the types of components, which are the basic structures of the React library. But before moving on to our topic, we will briefly talk about the concepts of component and state.
What is Component?
Components are the basic building blocks of developing a React application. In technical terms, these structures are just JavaScript functions or classes. They accept various inputs which are called props in the React ecosystem. These functions or classes eventually return code blocks of type JSX. In this way, React allows us to create what we want on the screen.
What is State?
States are simply JavaScript objects but their use in the React ecosystem differs from traditional ones. React uses states to show the current situation of components and manages itself unlike normal variables or objects. Although states are similar to props, they are different and can only be managed by the component they belong to.
So, What are Stateful and Presentational Components?
As we mentioned, components are the basic building blocks provided to us to create a React application. However, it is possible to distinguish these building blocks into two parts according to their usage.
If a component is only responsible for the display and styling of the data on the screen, these components are called Presentational Component. Such components do not store any data in themselves and therefore do not contain any state.
If the component is responsible for managing some data, removing side effects, and contains states, this component is called a Stateful Component.
Top comments (0)