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

You only need a class component when you:

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

Answer 2

This is answer is deprecated.

With react hooks, functional component can also have state.

---

1. When we use each kind of components?

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

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

Redux's creator Dan Abramov write 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 only concerns the UI.
• Container Components use Class Components, and concerns state and behavior.

2. Functional Components' benefits

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

• simple
• readable
• testable

3. Functional Components' limit

Functional Components are stateless, which is its limit.

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

4. Functional Components Enforced Best Practices

Stateless functional components are useful for dumb/presentational components. Presentational components focus on the UI rather than behavior, so it’s important to avoid using state in presentational components. Instead, 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 in a feature. Since stateless functional components don’t support local state, you can’t easily hack in some state in a moment of laziness. Thus, stateless functional components programatically 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 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>
  }
}