React Interview Questions and Answers – Part 4
Frequently asked React Interview Questions and Answers for both freshers and experienced developers.
React Interview Questions
- React Interview Questions and Answers – Part 1
- React Interview Questions and Answers – Part 2
- React Interview Questions and Answers – Part 3
- React Interview Questions and Answers – Part 4 (You are here…)
List of React Interview Questions and Answers
- What is the purpose of using a super constructor with a props argument?
- What is the meaning of reconciliation?
- What is the best way to set the state with a dynamic key name?
- Is it possible to use named exports with the lazy function?
- Why does React use className instead of the class attribute?
- What are fragments?
- Why should you use fragments instead of container divs?
- In React, what are portals?
- What are stateless components?
- What are stateful components?
1. What is the purpose of using a super constructor with a props argument?
The super() method must be used before using the this reference in a child class constructor. The same may be said for ES6 sub-classes. The major purpose for supplying props to super() is so that your child constructors may access 1this.props.
super() with props
1 2 3 4 5 6 7 | class MyComponent extends React.Component { constructor(props) { super(props) console.log(this.props) // { name: 'Jack', age: 30 } } } |
super() without props
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | class MyComponent extends React.Component { constructor(props) { super() console.log(this.props) // undefined // props parameter is still available console.log(props) // { name: 'Jack', age: 30 } } render() { // no difference outside constructor console.log(this.props) // { name: 'Jack', age: 30 } } } |
2. What is the meaning of reconciliation?
When a component’s props or state change, React compares the newly returned element to the previously displayed one to determine whether an actual DOM update is required. React will update the DOM if they are not equal. This is referred to as reconciliation.
3. What is the best way to set the state with a dynamic key name?
You can do this with computed property names if you’re using ES6 or the Babel transpiler to translate your JSX code.
Set the state with a dynamic key name in onChange method
1 2 3 | handleInputChange(e) { this.setState({ [e.target.id]: e.target.value }); } |
4. Is it possible to use named exports with the lazy function?
No, the React.lazy method only supports default exports. If you want to import exports named modules, you can make an intermediate module that reexports them as the default.
Let’s take an example component file which exports multiple named components.
1 2 3 | // Components.js export const FirstComponent = /* ... */; export const SecondComponent = /* ... */; |
and reexport Components.js components in an intermediate file IntermediateComponent.js.
1 2 | // IntermediateComponent.js export { FirstComponent as default } from "./Components.js"; |
Now you can import the module using the lazy function as below,
1 2 | import React, { lazy } from 'react'; const FirstComponent = lazy(() => import("./IntermediateComponent.js")); |
5. Why does React use className instead of the class attribute?
In JavaScript, class is a keyword, while JSX is a JavaScript extension. That is the primary rationale behind React’s usage of className rather than class. The className prop should be a string.
1 2 3 | render() { return <span className="menu dark-menu">Menu</span> } |
6. What are fragments?
It’s a popular React pattern that allows a component to return several items. Without adding new nodes to the DOM, you may group a list of children using Fragment.
1 2 3 4 5 6 7 8 9 | render() { return ( <React.Fragment> <FirstComponent /> <SecondComponent /> <ThirdComponent /> </React.Fragment> ) } |
Declaring fragments now has a new, more concise syntax. It appears to be empty tags:
1 2 3 4 5 6 7 8 9 | render() { return ( <> <FirstComponent /> <SecondComponent /> <ThirdComponent /> </> ) } |
7. Why should you use fragments instead of container divs?
The list of causes is as follows:
- By avoiding the creation of an extra DOM node, fragments are a little faster and consume less memory. This is only useful on trees that are quite massive and deep.
- Some CSS methods, such as Flexbox and CSS Grid, have special parent-child connections, making it difficult to maintain the correct layout when divs are inserted in the middle.
- The DOM Inspector has been simplified.
8. In React, what are portals?
Children should be rendered into a DOM node that is outside the parent component’s DOM hierarchy, which is called a portal.
1 | ReactDOM.createPortal(child, container); |
Any renderable React child, such as an element, string, or fragment, is the first parameter. A DOM element is used as the second parameter.
9. What are stateless components?
A stateless component is one whose behaviour is independent of its state. You may create stateless components using either a function or a class. If you don’t require a lifecycle hook in your components, however, function components are the way to go.
If you use function components instead of this keyword, you’ll have a number of benefits: they’re easier to create, comprehend and test, and they’re a bit quicker.
10. What are stateful components?
A stateful component is one whose behaviour is based on its state. Stateful components are always class components with a constructor-initialized state.
1 2 3 4 5 6 7 8 9 10 | class App extends Component { constructor(props) { super(props) this.state = { count: 0 } } render() { // ... } } |
React 16.8 Update:
Hooks allow you to leverage React’s state and other features without having to write classes.
1 2 3 4 5 6 7 8 9 | import React, {useState} from 'react'; const App = (props) => { const [count, setCount] = useState(0); return ( // JSX ) } |
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
