React Question
What are the differences between functional and class components?

Question

React Question

What are the differences between functional and class components?

Accepted Answer

Functional components are simpler and easier to test, while class components have more features and lifecycle methods.

Functional components are written as JavaScript functions, while class components are written as ES6 classes.
Functional components are stateless and do not have their own internal state, while class components can have state.
Functional components do not have lifecycle methods, while class components have lifecycle methods like componentDidMount and componentDidUpdate.
Functional components are easier to read and understand, as they have a simpler syntax.
Functional components are recommended for simple UI components, while class components are recommended for complex UI components.

Accepted Answer

1. Declaration
Functional components are nothing but JavaScript functions and therefore can be declared using an arrow function or the function keyword. Class components, on the other hand, are declared using the ES6 class.
2. Handling props
In functional components, the handling of props is pretty straightforward. Any prop provided as an argument to a functional component can be directly used inside HTML elements. this keyword is used in the case of class components.
3. Handling state
Functional components use React hooks to handle state. It uses the useState hook to set the state of a variable inside the component. We cannot use React Hooks inside class components, therefore state handling is done very differently in a class component.

Top OodlesTechnologies React Developer interview questions & answers

Popular interview questions of React Developer