Using components in with a better understanding of how they affect your has always been a confusing topic, and developers end up having a bulky code base that gets harder to manage through time. So, the major answer that you will hear that provide access to more features like , but with that's not valid anymore. React App’s Performance Class Components (state) Hooks You must have heard about one of them having better performance, but performance depends on what the code is doing rather than choosing a class or function. The performance is almost the same and can make differences using various optimization techniques. Function Components Consider A Component. Let’s take an example using a simple that simulates a network request with and shows a confirmation alert. If is ‘Mohit’ it will simply show after 3 seconds. component setTimeout props.user ‘Followed Mohit’ In the example above you can use arrows or function declaration both work the same way. Implementing the above example in class: Oftentimes people mistakenly look at both the same way, but there is a difference between their implications. To observe the difference you can open the code I have created for a better understanding. sandbox Open the code sandbox given above and run the code, now try these steps to measure the difference. Click on the button. follow (function or class you can choose any of it) Change the selected profile before 3 seconds pass.Now read the text alert. You will notice when we click on the follow button (using a function component) and then switch to a different profile, it shows the previous user name instead of what we selected later 3 seconds pass. But when we press the follow button (using a class component), it shows the newly selected user name every time. You will getter a better understanding by running the sandbox on your own. In this example, if you press the follow button on and then change the selected user you are still going to see Mohit in the alert dialogue box in case of t. And in the case of the class component, you will notice the name in the alert dialogue box. ‘Mohit’s’ profile function componen switched profile As you can see, the first behavior is totally what we claim to be correct for us, as my component shouldn't get confused about who I followed!. So what can be the reason for this buggy behavior? To understand this let us take a closer look at the method in our class. showMessage The class method reads from and props are immutable in React so they can never change, but has always been mutable & that’s the whole purpose of in a class as React mutates it over in and so that we can the fresh version in the render. If our component re-renders while already being in the process, will change & the showMessage method reads the user from ‘ props. this.prop.user this this render lifecycle method this.props too new ‘ This shows an interesting relationship in the nature of User Interfaces, and if we say UI is a function of the current application state, the event handlers are a part of the But scheduling a timeout that reads breaks the relation. render result. this.props So let’s say there is no such thing as , what would be the solution to this problem then? function components If we want to somehow ‘repair’ the connection between render and correct props and the callback which reads them. One way we can achieve this possibility is by reading early during the event and then pass them through the timeout completion handler. Still, this approach will make the code more at the end, and we can’t use more than one and also we can't access the & we will end up having the same problems again. showMesage this.props error-prone prop state Even if we put the code inside won't answer the bigger problems. The aim is to structure our code in such a way that allows splitting it into more methods and also being able to read the props and state corresponding to the render related to that call. alert handleClick What if we the methods in the constructor? bind Remember that the problem is in reading too late, not with the syntax we are using, so it won’t solve this problem. Bit problem can be solved if we rely on JavaScript closures. this.props However, closures are avoided as it is hard to think about a value that can be mutated overtime. So if we use closures over or from a particular render, we easily can count on them. props state Function components capture the rendered values: But what's the point of having a class if we are defining the functions inside render? When the parent component renders the with different props, calls the function again & the event handle that we already clicked which belongs to the previous render having its own value is being read by . And that’s why in the above sandbox example when we click on follow after changing the selected user it still shows ProfilePage React ProfilePage user showMessage Mohit ‘Followed Mohit’. Read behind a paywall at https://medium.com/javascript-in-plain-english/understanding-the-difference-between-function-class-components-in-react-35279a119d29

Too Long; Didn't Read

Making security fun one episode at a time

How to Understand the Difference Between Function & Class Components in React

Too Long; Didn't Read

Mohit

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Understand the Difference Between Function & Class Components in React

Too Long; Didn't Read

Mohit

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES