Most Popular React JS Interview Questions with Answers πŸ‘Œ

Don’t tell me the moon is shining; show me the glint of light on broken glass.

Here we have most popular React JS interview questions with their answers.
1. What are the synthetic events in React?
Synthetic Event is cross-browser wrapper around the browser’s native event. It’s API is same as the browser’s native event, including stopPropogation() and preventDefault(), except the events work identically across all the browsers.

2. What is the difference between createElement and cloneElement?
JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI. Whereas cloneElement is used to clone an element and pass it new props.

3. Why should we not update the state directly?
If you try to update state directly then it won’t re-render the component. Instead use setState() method. It schedules an update to a component’s state object. When state changes, the component respond by re-renderring.

4. What is the purpose of callback functions as an argument of setState()?
The callback function is invoked when setState finished and the component gets rendered. Since setState() is asynchronous the callback functions is used for any post action.

5. How to create components in React?
1. Functional Components:

2. Class Components:

6. What is Pure Component?
React.PureComponent is exactly the same as React.Component except that is handles the shouldComponentUpdate() method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state.

7. What is reconciliation?
When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

8. What are portals in React?
Portal is a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
ReactDOM.createPortal(child, container);

9. What are the stateless components?
If the behavior is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components.

10. How do you memorize a component?
Since React v16.6.0, we have a React.memo. It provides a higher order component which memorize components unless the props change. To use it, simply wrap the component using React.memo before you use it.

11. Can you force a component to re-render without calling setState?
By default, when your component’s state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate(),

12. Is it mandatory to define constructor for React component?
No, it is not mandatory. i.e, If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

13. Why you can’t update props in React?
The React philosophy is that props should be immutable and top-down. This means that a parent can send any prop values to a child, but the child can not modify received props.

14. What are render props?
Render Props is a simple technique for sharing code between components using a prop whose value is a function. The below component uses a render prop that returns a React element.

Libraries such as React Router and DownShift are using this pattern.

15. What is React memo function?
Class components can be restricted from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React memo.

16. How to use https instead http in create-react-app?
You just need to use HTTPS=true configuration. You can edit your package.json script section:
“scripts”: {“start” :”set HTTPS=true && react-script start”} or just run
set HTTPS=true && npm start

Thanks to read

Harish Sharma

Known Technical

Thank you so much to be here and just to read my blog post. If you really love this post. Kindly share it with your friend's circle.

If you've really like my above post then, please share it to on below media

Write to Me

In case, if you like my portfolio

    Harish Sharma on Facebook    Harish Sharma on Twitter    Harish Sharma on Instagram    Harish Sharma on LinkedIn    Harish Sharma's Youtube Channel

    Go to Top