Understand React Stateful and Stateless components

Hurry Up !! Check Out Todays Deal

React js components : Stateful vs stateless

What is state ? State is an object which is declared inside the constructor method of the class.They are mutable and are used to interact between different component of the class.

Statefull Components

Statefull components are the component which have state. They are created in constuctor method of the class. They are refered as class component and are extended by React.Component. Statefull component or container deal with the data which are frequently updated. Statefull component recieve both state and props. The state are mutable and are updated with this.setState() method of the class.

Stateless Components

Statless component are static and often act like container in an app. These component only recieve props. They act upon the data which are pass to them as props.Stateless component are written as pure javascript function whoes parameter value does not change.Statless component are sometimes also referred as 'presentational component'. They are used when you know that the information is static and will never change.Whenever writting component we should always use statless component whenever possible.

Statefull vs Stateless

The main difference between these state are that one has state and other does not. That means stateful component always used to track data which are frequently changing while stateless component prints out data which are passed to them as props or they will always render the samething.

Now let's look at example of statefull and stateless component.

First let's look at the data to be rendered:

const data = [ { type: "Flowers", kind: "Lotus", }, { type: "Animals", kind: "Cat", }, { type: "Animals", kind: "Dog", }, { type: "Flowers", kind: "Balsam", }, { type: "Animals", kind: "Snake", }, { type: "Flowers", kind: "Sunflower", }, { type: "Flowers", kind: "Rose", }, ];

Now let's create our parent class or statefull class which will contain the state of this data.

class Statefull extends React.Component { constructor(props) { super(props); this.state = { data: data }; } clickToFileter(kind) { let types = []; if (kind === "all") { types = data; } else { types = data.filter((value) => { if (value.type === kind) return true; }); } this.setState({ data: types }); } render() { return ( <div className="App"> <h3> Types Lists: </h3> <button onClick={(e) => { this.clickToFileter("all"); }} > {" "} All{" "} </button> <button onClick={(e) => { this.clickToFileter("Animals"); }} > {" "} Animals{" "} </button> <button onClick={(e) => { this.clickToFileter("Flowers"); }} > {" "} Flowers{" "} </button> {this.state.data.map((value, idx) => { return <Stateless key={idx} kind={value.kind} />; })} </div> ); } }

In above code I have given three button which will change the state of the component. And this changed state is pass through Statless component as props which than display the content of the state.

const Stateless = ({ kind }) => { return <h3>{kind}</h3>; };

OUTPUT:

Output
Output

References

Realate Post


Understanding Merge sort algorithm

Understanding Merge sort algorithm

Merge sort is a sorting algorithm based on divide and conquer technology. It is one of the most efficient classification algorithms.Merge Sort Iteratively decompose the array into two equal sub-arrays until each sub-array contains one element.


OpenCV - Understanding Convex Hull using C++

OpenCV - Understanding Convex Hull using C++

A tutorial on determining a shape's or a group of points' Convex Hull. The OpenCV code implementation in C++ and Python is shared.


OpenCV - Understanding Low Pass And High Pass Filter using C++

OpenCV - Understanding Low Pass And High Pass Filter using C++

In this article we will be looking at Low Pass and High Pass Filter and how to apply them using C++ and OpenCV


Understanding and Implimenting ResNet using PyTorch [2021]

Understanding and Implimenting ResNet using PyTorch [2021]

The main goal is to provide insight into ResNets and dive into ResNet for the ImageNet dataset. It makes sense, according to researchers, to declare that “the deeper the better” when it comes to...


OpenCV - Understanding Canny Edge Detection Using C++

OpenCV - Understanding Canny Edge Detection Using C++

Learn how to use OpenCV to detect edges.In OpenCV, experiment with various edge detection algorithms such as Canny.


Another Techs


© 2022 Another Techs. All rights reserved.