React Questions
Warm up for your React interview with most asked questions and answers for junior, mid, and senior roles.
What is children prop?
Show AnswerHide Answer
Children prop is a prop that is used to pass children to a component.
What is the main difference between createElement and cloneElement?
Show AnswerHide Answer
createElement is used to create a new element and cloneElement is used to clone an existing element.
What are the lifecycle methods of ReactJS class components?
Show AnswerHide Answer
ReactJS has a lifecycle of three stages:
- Mounting
- Updating
- Unmounting
Mounting is the process of creating a native view and mounting it to the screen.
Updating is the process of updating the native view.
Unmounting is the process of removing the native view from the screen.
With React Hooks we can use useEffect and useState to manipulate and trigger these stages
What is prop drilling?
Show AnswerHide Answer
Prop drilling is the term for passing data through several nested children components. It can cause issues with component reusability and app performance.
What is Context?
Show AnswerHide Answer
Context is a way to share data between components without having to pass props down the component tree.
What is Redux?
Show AnswerHide Answer
Redux is a state management pattern. It helps you manage the application state, synchronizing the application's state between multiple parts of the application.
It has three main parts:
- Reducers: A function that returns the next state given the current state and an action to handle.
- Actions: An object that describes an event. It has a type property that defines the event, and a payload property that contains the data associated with the event.
- Store: A single source of truth for the application state. It is the only source of truth for the application state.
What is a stateless component?
Show AnswerHide Answer
A stateless component is a component that does not maintain any state. It is a function that returns a React element.
What is meant by callback function? What is its purpose?
Show AnswerHide Answer
A callback function is a function that is passed to another function as an argument. The callback function is then called inside the function that it is passed to.
Explain the use of ‘key’ in react list
Show AnswerHide Answer
The key property is used to uniquely identify each element in a list. It is used to optimize the rendering of the list.
What is Webpack?
Show AnswerHide Answer
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser,
What is Babel?
Show AnswerHide Answer
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
State the difference between React JS and React Native
Show AnswerHide Answer
- ReactJS main focus is Web Development
- ReactJS is a Javascript library
- React uses HTML tags like p,span,div, etc...
- React Native is focused on Mobile Development
- React Native is a mobile framework that uses Javascript Engine
- Both are open-source and supports the JSX syntax
What are Higher-Order Components (HOC) in React?
Show AnswerHide Answer
A higher-order component is a function that takes a component and returns a new component.
What are advantages of using React Hooks?
Show AnswerHide Answer
Hooks allow you to write functions that can be used in React components. They are a way to write code in a modular and reusable way, using all the React features.
What are the differences between a Class component and Functional component?
Show AnswerHide Answer
A functional component is a function that returns a React element. A class component is a class that extends React.Component.
What is an event in React?
Show AnswerHide Answer
An event is an action that can be triggered by a User or any System like pressing a key, or a mouse click.