React functional components vs classical components

Question

I'm trying to understand when to use React functional components vs. classes and reading from the docs they don't really go into detail. Can you give me some primary examples of the below of when you would want a specific feature of a class to make a component?

A functional component is less powerful but is simpler, and acts like a class component with just a single render() method. Unless you need features available only in a class, we encourage you to use functional components instead.

Answer 1

2022 Update

You only need a class component when you:

• need to create an error boundary using componentDidCatch

---

Original 2016 Answer

You only need a class component when you:

• need the component state or
• need the lifecycle methods. such as componentDidMount etc.

Answer 2

This answer is deprecated.

With react hooks, a functional component can also have a state.

---

1. When do we use each kind of component?

If we use Redux, there will be two kinds of Components:

• Presentational Components: concern about the UI
• Container Components: manage the state

Redux's creator Dan Abramov has written an article Presentational and Container Components:

Presentational Components are written as functional components unless they need state, lifecycle hooks, or performance optimizations.

Even though we don't use Redux. We can also separate the components as Presentational Components and Container Components.

• Presentational Components use Functional Components and are only concerned with the UI.
• Container Components use Class Components and concern state and behaviour.

2. Benefits of Functional Components

Cory House's article React Stateless Functional Components: Nine Wins You Might Have Overlooked let me know the Functional Components' advantages, Functional Components are more:

• simple
• readable
• testable

3. Limits of Functional Components

Functional Components are stateless, which is its limit.

But fortunately, most of the time, we don't need a state.

4. Functional Components Enforced Best Practices

Stateless functional components are useful for dumb/presentational components. Presentational components focus on the UI rather than behaviour, so it’s important to avoid using state in presentational components. Instead, the state should be managed by higher-level “container” components, or via Flux/Redux/etc. Stateless functional components don’t support state or lifecycle methods. This is a good thing. Why? Because it protects from laziness.

See, it’s always tempting to add state to a presentational component when you’re in a hurry. It’s a quick way to hack into a feature. Since stateless functional components don’t support local states, you can’t easily hack into some state in a moment of laziness. Thus, stateless functional components programmatically enforce keeping the component pure. You’re forced to put state management where it belongs: in higher-level container components.

Answer 3

Functional Component

• Used for presenting static data.
• Can't handle fetching data.
• Easy to write.

Example :

const Foo =()=>
{
   return <Text>Hi there!</Text>
}

Class Component

• Used for the dynamic source of data.
• Handles any data that might change(fetching data, user events, etc).
• More code to write.

Example :

class Foo extends Component {

render(){
return <Text>Hi There!</Text>
  }
}

Answer 4

The major difference between class and functional components is,

• The Class components mutate the state i.e the same variable is used for changing the values in the state
• In functional components the state is not mutated. There are new variables created every time for rerendering. You will have a clean tree with functional components