In the **early days** of React, **Classes** were the only way to have **functionality** in your components (like state). You’d only use **Functions for dumb components** which only displayed stuff.
This is no longer true, because we now have [**React Hooks**](https://reactjs.org/docs/hooks-intro.html) and they allow us to have in Function components the same functionality we used to have with Classes.
However, there is **one key difference**, that not everyone is aware of 🔮
### Let’s start with a simple example
The best way to understand this concept is by **seeing it in action.**
Let’s create a simple app where you can **select** a Simpsons’ character from a list. Then when you press a **button**, an **alert** will show a greeting to that character **after 4 seconds**.
We will create the SayHicomponentas a Class and also as a Function, to see the **difference**.
### Our two SayHi components
First, let’s write our Function component:
```
import React from "react";
const SayHiFunction = ({ name }) => {
const handleClick = () => {
setTimeout(showAlert, 4000);
};
const showAlert = () => {
alert(\`Hello ${name}!\`);
};
return (
<div>
<button onClick={handleClick}>
Say Hi with Function
</button>
</div>
);
};
export default SayHiFunction;
```
As you can see, it’s a very simple component. It receives **name as a prop**, and then when you **click** the button, a **timeout** is set to show the **alert after 4 seconds.**
Now let’s transform this Function into a Class:
```
import React, { Component } from "react";
class SayHiClass extends Component {
handleClick = () => {
setTimeout(this.showAlert, 4000);
};
showAlert = () => {
alert(\`Hello ${this.props.name}!\`);
};
render() {
return (
<div>
<button onClick={this.handleClick}>
Say Hi with Class
</button>
</div>
);
}
}
export default SayHiClass;
```
Pretty easy, right? I’m sure almost anyone with some React knowledge would be able to do this transformation.
You can play with the app here:
However, **this two components will not behave the same 😕**
### So what’s the difference?! 😠
Ok, the important part. Let’s do this:
- Select “ *Marge* ” from the list
- Press the button
- **Change** the character to “ *Homer* ” **before** **4 seconds** pass
What do you expect to happen? **Do you expect the alert to say “ *Hello Marge”* or “ *Hello Homer”*?**
Again, right now the important thing is not what you *think* will happen, but what would you ***expect*** to happen in this case.
Of course, **we would expect to see “ *Hello Marge”***. That was the **selected** **character** **when we pressed the button.**
Now that we’re on the same page on that, what do you think ***will*** happen?
Let’s take a look at the Function component first:
Good! **It behaves as we expected** and the alert says “ *Hello Marge”*.
Let’s try the Class component now:
Mmm, that was **not what we expected**. We changed the selected character after pressing the button, and the alert message also changed 🤔
### What the f\*%! happened?
Well, **our two components are not** **the same.** Of course, one is a Class and the other is a Function, but **we also made a mistake when we transformed** the Function into a Class.
The example seemed obvious and straightforward, and that’s the transformation most people would do. **It’s common to think those two pieces of code are equivalent.** However, it’s wrong because of the **main difference between Classes and Function components**:
> **Function components capture the rendered values.**
### What does that mean?
Let’s analyze our example to understand this.
When we used the Class component, **the alert message** **changed** after we changed the selected character.
That happens because **our method is reading from** **this.props.name**.
*But props are immutable in React, that’s not the issue.*
It’s true, props are immutable, but… **this is mutable**. And it makes sense, because **React mutates** **this over time so you can read the fresh version** in render and lifecycle methods.
So in our example, by changing the selected character the second time, we **re-render** the component, so **this.props is updated**. The method is **reading from the latest, newest props.**
That’s a problem because we weren’t expecting that. **We would expect our event handlers to be “linked” to a particular render, with particular props.**
By setting a timeout whose callback reads this.props, we’re making that impossible. **Our callback will not be “linked” to a particular render**, so it doesn’t know what the “correct” props are.
We don’t have this issue with the Function component because, once again:
> Function components capture the rendered values.
That means that even if we change the character a second time, the method **will display the alert using** **the selected character when the button was pressed**, because that value was *captured*. Unlike this, the propsare **immutable so the object is never mutated by React.**
When the parent component renders SayHiFunction with different props, React will call the SayHiFunction again. But **the event handler we already clicked is “linked” to the previous render with its own** **name value and the** **showAlert callback that reads it.**
### So Classes are useless?
No! Not at all. Classes are fine, we’re having a bug here because **our implementation is incorrect, different from the original function component.**
If you don’t want to use a Function component, there are many ways to fix this issue. For example, you could do this:
```
import React, { Component } from "react";
class SayHiClass extends Component {
handleClick = () => {
const { name } = this.props;
setTimeout(() => this.showAlert(name), 4000);
};
showAlert = (name) => {
alert(\`Hello ${name}!\`);
};
render() {
return (
<div>
<button onClick={this.handleClick}>
Say Hi with Class
</button>
</div>
);
}
}
export default SayHiClass;
```
Our props were getting “lost” before, so in this case we are reading and **capturing them early during the event.**
Again, this is just one way of fixing it, there are many others but that’s not the focus of this post.
### That’s it!
I hope this post was useful and now you understand the main key difference between Classes and Function components.
Thanks for reading ❤️
[](https://blog.sentry.io/how-to-reduce-ttfb/?utm_source=devto&utm_medium=paid-community&utm_campaign=perf-fy25q4-vitalsblog&utm_content=static-ad-ttfbblogshot-learnmore&bb=211800)
## How to reduce TTFB
In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.
In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.