Develop Reference

useCallback & useMemo are con's in functional components when compared to class

In functional components, will the usage of useCallback and useMemo hooks cause performance issue when compared to class component implementation as these are some extra checks react has to do.
So are class components better than functional components in this case?

Rendering query string variables in React [duplicate]

After spending some time learning React I understand the difference between the two main paradigms of creating components.
My question is when should I use which one and why? What are the benefits/tradeoffs of one over the other?
ES6 classes:
import React, { Component } from 'react';
export class MyComponent extends Component {
render() {
return (
<div></div>
);
}
}
Functional:
const MyComponent = (props) => {
return (
<div></div>
);
}
I’m thinking functional whenever there is no state to be manipulated by that component, but is that it?
I’m guessing if I use any life cycle methods, it might be best to go with a class based component.

New Answer: Much of the below was true, until the introduction of React Hooks.
componentDidUpdate can be replicated with useEffect(fn), where fn is the function to run upon rerendering.
componentDidMount methods can be replicated with useEffect(fn, []), where fn is the function to run upon rerendering, and [] is an array of objects for which the component will rerender, if and only if at least one has changed value since the previous render. As there are none, useEffect() runs once, on first mount.
state can be replicated with useState(), whose return value can be destructured to a reference of the state and a function that can set the state (i.e., const [state, setState] = useState(initState)). An example might explain this more clearly:
const Counter = () => {
const [count, setCount] = useState(0)
const increment = () => {
setCount(count + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>+</button>
</div>
)
}
default export Counter
As a small aside, I have heard a number of people discussing not using functional components for the performance reasons, specifically that
"Event handling functions are redefined per render in functional components"
Whilst true, please consider if your components are really rendering at such a speed or volume that this would be worth concern.
If they are, you can prevent redefining functions using useCallback and useMemo hooks. However, bear in mind that this may make your code (microscopically) worse in performance.
But honestly, I have never heard of redefining functions being a bottleneck in React apps. Premature optimisations are the root of all evil - worry about this when it's a problem.
Old Answer: You have the right idea. Go with functional if your component doesn't do much more than take in some props and render. You can think of these as pure functions because they will always render and behave the same, given the same props. Also, they don't care about lifecycle methods or have their own internal state.
Because they're lightweight, writing these simple components as functional components is pretty standard.
If your components need more functionality, like keeping state, use classes instead.
More info: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

UPDATE Jan 2023
TLDR; Functions are the best way to create components. React.Component is a legacy API.
"We recommend to define components as functions instead of classes."
"Class components are still supported by React, but we don’t recommend using them in new code."
https://beta.reactjs.org/reference/react/Component
UPDATE March 2019
Building on what was stated in my original answer:
Are there any fundamental differences between React functions and
classes at all? Of course, there are — in the mental model.
https://overreacted.io/how-are-function-components-different-from-classes/
UPDATE Feb 2019:
With the introduction of React hooks, it seems as though the React teams wants us to use functional components whenever possible (which better follows JavaScript's functional nature).
Their motivation:
It’s hard to reuse stateful logic between components.
Complex components become hard to understand.
Classes confuse both people and machines.
A functional component with hooks can do almost everything a class component can do, without any of the draw backs mentions above.
I recommend using them as soon as you are able.
Original Answer
Functional components aren't any more lightweight than class based components, "they perform exactly as classes." - https://github.com/facebook/react/issues/5677#issuecomment-241190513
The above link is a little dated, but React 16.7.0's documentation says
that functional and class components:
are equivalent from React’s point of view
https://reactjs.org/docs/components-and-props.html#stateless-functions
There is essentially no difference between a functional component and a class component that just implements the render method, other than the syntax.
In the future (quoting the above link):
we [React] might add such optimizations
If you're trying to boost performance by eliminating unnecessary renders, both approaches provide support. memo for functional components and PureComponent for classes.
https://reactjs.org/docs/react-api.html#reactmemo
https://reactjs.org/docs/react-api.html#reactpurecomponent
It's really up to you. If you want less boilerplate, go functional. If you love functional programming and don't like classes, go functional. If you want consistency between all components in your codebase, go with classes. If you're tired of refactoring from functional to class based components when you need something like state, go with classes.

Always try to use stateless functions (functional components) whenever possible. There are scenarios where you'll need to use a regular React class:
The component needs to maintain state
The component is re-rendering too much and you need to control that via shouldComponentUpdate
You need a container component
UPDATE
There's now a React class called PureComponent that you can extend (instead of Component) which implements its own shouldComponentUpdate that takes care of shallow props comparison for you. Read more

As of React 17 the term Stateless Functional components is misleading and should be avoided (React.SFC deprecated, Dan Abramov on React.SFC), they can have a state, they can have hooks (that act as the lifecycle methods) as well, they more or less overlap with class components
Class based components
state
lifecycle methods
memoization with React.PureComponent
Functional components:
state (useState, useReducer hooks)
lifecycle methods (via the useEffect, useLayoutEffect hooks)
memoization via the memo HOC
Why i prefer Funtional components
React provide the useEffect hook which is a very clear and concise way to combine the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods
With hooks you can extract logic that can be easily shared across components and testable
less confusion about the scoping
React motivation on why using hooks (i.e. functional components).

I have used functional components for heavily used application which is in production. There is only one time I used class components for "Error Boundaries" because there is no alternative "Error Boundaries" in functional components.
I used "class component" literally only one time.

Forms are easier with functional, because you can reuse form input fields and you can break them apart with React display conditionals.
Classes are one big component that can't be broken down or reused. They are better for function-heavy components, like a component that performs an algorithm in a pop-up module or something.
Best practice is reusability with functional components and then use small functional components to assemble complete sections, ex.- form input fields imported into a file for a React form.
Another best practice is to not nest components in the process of doing this.

Class-based components offer a more structured and organized way to define and implement a component, and they provide additional features and capabilities, such as the ability to use local state and lifecycle methods. This can make them a good choice for creating complex components that require a lot of logic and functionality.
On the other hand, functional components are simpler and easier to work with, and they can be more performant because they are more lightweight. They are also easier to test and debug, because they are pure functions that don't have side effects. This makes them a good choice for creating simple components that don't require a lot of logic or state management.

When NOT to use a React Pure Component (React.memo) and what are the disadvantages of using it wrongly?

Ok, React.memo HOC mimics for a "function component" what extending React.PureComponent would do for a "class component".
If some rerendering was triggered by some parent component, pure components don’t rerender if its props haven’t changed. Ok
But i can’t understand when i should not use React.memo for function components. In my mind, it appears to be always the best solution, in a way that should be the default behavior of React components. But it isn’t. What am i not understanding of this? In which example we should not use React.memo or rely on pure components?
And if my React Component shouldn't be Pure but I made it so, what are the disadvantages?

When do you use class components in react since useState is now available in Functional components

I am not an expert in react so I am a little confused but since the introduction of react hooks. when do you use class components instead of functional components?

I would use class when there is something that functional components can't implement like state or lifecycle methods, waitttttttttttttttttt...
Since hooks have the state and lifecycle methods you don't need classes anymore :)

Your typical lifecycle methods have been replaced with useEffect, which reduces the amount of code you have significantly. You don't need to define multiple methods (componentDidMount, componentDidUpdate, etc) when you can use a single hook to take care of them all.
The other advantage is that they can start with much less boilerplate code than their class equivalent, and scales much better considering you don't need to replace multiple methods when reworking features in such a component.
The main reason you can still use classes is because there's no reason to remove them - they're still a core part of what React is and how it works. Hooks are newer and follow a completely different design approach to what everyone already knows. They're completely compatible with one another.

ReactJS: what is the difference between functional component and class component

Could anyone can explain in detail the difference between functional component and class component in ReactJS?
When we use a functional component and when we use the class component?

Here's a great article, "Presentational and Container Components", by Dan Abramov that can help you with that.
And here's a tl;dr; of the way I understand this:
You'll have to use class CreatePostForm extends Component {} or React.createClass() if:
you need access to your component's lifecycle methods (ie.: componentWillMount or componentDidMount) – NOTE: Since React 16.8, this is no longer necessarily true and I would highly recommend reading on React Hooks as they can make things simpler once you get comfortable with them;
your component have direct access to your store and thus holds state (some people also call these components: smart components or containers).
When your component just receive props and render them to the page, then you have a 'stateless component' (some people call these components dumb components or presentational components) and can use a pure function to represent it and it can be as simple as this
import React from 'react';
export default () => <p>Hello from React!</p>;
Now, it's important to remember that a pure function can get way more complex than this and if you're comfortable with some ESNext syntax and destructuring and spreading attributes, you can have a presentational component that looks like this:
import React from 'react';
import AnotherComponent from './AnotherComponent';
export default ({ children, ...rest }) =>
<AnotherComponent extraProp="anExtraProp" { ...rest }>
{ children }
</AnotherComponent>;
Hope this helps.

See this picture. I am too much late but i will help the others.
Source of Image is Udemy Course

Functional Stateless Components (that middle word you missed is the important one) are just a 'dumb' function that takes props as an input and outputs markup. They don't have any state or methods or anything like that. Just (props) => { return <span>props.foo</span>; }
Class components can have state, variables, methods etc.

Functional Components:
These components are stateless components and does not have react life-cycle methods.
These components can be used for presentation purpose.
These components can be easy to debug,test.
Class Components:
These components are statefull components and can support react life-cycle methods by extending react components.
These components can be used when you want to create methods , state for an component.

Functional Components
A functional component is basically a JavaScript function which returns a React element. Its accepts props as argument and returns valid JSX
Class Components
Class Components are more complex than functional components including constructors, life-cycle methods, render( ) function and state (data) management. Class components are ES6 classes.
Benefits of using Functional Components
Functional components are easy to test.
It can have better performance.
Functional components are easy to debug.
It end up with less code.
It help you to use best practices.
Functional components can reduce coupling.
For more click here

When react was introduced, only class components were used to re-render the component when state changes and functional components were treated as presentational components as they don't have state access.
From react 16.8 version update, with introduction to hooks, now functional components also have state access.
In the class component, managing state is performed in a single state object but in function we can create as many hooks as we want.
In the class component, when re-render happens, it will invoke methods but in functional components when state update, it re-create and invoke inner functions if we don't use useCallback and useMemo hooks.
Only Class components are used as Error Boundaries

Functional Component : Using simple javascript function to define component.
it uses props as input(stateless)
Class Component : Using class to define a component(state Component)

Besides the obvious difference in the syntax, you need use a class component instead of a function component when your component needs to store and manipulate its own internal state or when you need access to the several lifecycle methods like componentDidMount, etc to perform network operations, manipulate the DOM, interact with third-party libraries, etc
I recommend you to take a look a the React docs (https://reactjs.org/docs/react-component.html) about the React.Component API to find a detailed description of all the lifecycle methods and the state API.

1-Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks
2-You end up with less code
3-They help you to use best practices. It will get easier to separate container and presentational components because you need to think more about your component’s state if you don’t have access to setState() in your component
4-The React team mentioned that there may be a performance boost for functional component in future React versions

In the world of react, there are two ways to write components:-
Using functions
Using class
The following example shows the two ways you can write the same component.
Functional component
import React from "react";
function FunctionalComponent() {
return <h1>Hello, world</h1>;
}
Class component
import React, { Component } from "react";
class ClassComponent extends Component {
render() {
return <h1>Hello, world</h1>;
}
}
With Recent releases of React, the choice of when to write when depends on the developer's preferences.
Both styles have their own pros and cons. Functional components are taking over modern React in the foreseeable future. Everything we can do with class components is possible with the functional components. It can be written shorter and simpler, which makes it easier to develop, understand, and test.
React team is supporting more React hooks for functional components that replace or even improve upon class components. They mentioned in prior releases that they will make performance optimizations in functional components by avoiding unnecessary checks and memory allocations. And as promising as it sounds, new hooks are recently introduced for functional components such as useState or useEffect while also promising that they are not going to obsolete class components but recommend a gradual adoption strategy.

Function component is a Hook Using work and the usestate and any other hook function to use and dynamic data display then some problem for function component in a reactjs
Class Component is an easy way to use for compare to function component and daynamic data update then to easily work. Class component is what state and props use to pass runtime data to a component.