Top 5 Most Asked React Interview Questions and Answers By Muhammad Umair

MianUmair — Wed, 21 Sep 2022 08:58:28 +0000

Top 5 Most Asked React Interview Questions and Answers

Question no 1: Why should we not update the state directly?

If you try to update the state directly then it won’t re-render the component.

Wrong this.state.message = 'Hello world'
Instead, use setState() method. It schedules an update to a component's state object. When the state changes, the component responds by re-rendering.

//Correct this.setState({ message: 'Hello World' })
Note: You can directly assign to the state object either in the constructor or using the latest javascript’s class field declaration syntax.

Question no 02: What is the purpose of the callback function as an argument of setState()?

The callback function is invoked when setState is finished and the component gets rendered. Since setState() is asynchronous the callback function is used for any post action.

Note: It is recommended to use the lifecycle method rather than this callback function.

setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'))

Question no 3: What is the difference between HTML and React event handling?

Below are some of the main differences between HTML and React event handling,

In HTML, the event name usually represents in lowercase as a convention:

Whereas in React it follows the camelCase convention:

jsx harmony

In HTML, you can return false to prevent default behavior:

Whereas in React you must call preventDefault() explicitly:

function handleClick(event) { event.preventDefault() console.log('The link was clicked.') }

In HTML, you need to invoke the function by appending () Whereas in react you should not append () with the function name. (refer "activateLasers" function in the first point for example)

Question no 4: How to bind methods or event handlers in JSX callbacks?

There are 3 possible ways to achieve this:

Binding in Constructor: In JavaScript classes, the methods are not bound by default. The same thing applies to React event handlers defined as class methods. Normally we bind them in the constructor.

class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Click happened'); } render() { return <button onClick={this.handleClick}>Click Me</button>; } }

Public class fields syntax: If you don’t like to use the bind approach then public class fields syntax can be used to correctly bind callbacks.

`jsx harmony handleClick = () => { console.log(‘this is:’, this) }

jsx harmony {'Click me'}
`
Arrow functions in callbacks: You can use arrow functions directly in the callbacks.

jsx harmony handleClick() { console.log('Click happened'); } render() { return <button onClick={() => this.handleClick()}>Click Me</button>;}

Note: If the callback is passed as a prop to child components, those components might do an extra re-rendering. In those cases, it is preferred to go with .bind() or public class fields syntax approach considering performance.

Question no 5: How to pass a parameter to an event handler or callback?

You can use an arrow function to wrap around an event handler and pass parameters:

jsx harmony <button onClick={() => this.handleClick(id)} /> This is an equivalent to calling '.bind': jsx harmony <button onClick={this.handleClick.bind(this, id)} /> Apart from these two approaches, you can also pass arguments to a function which is defined as arrow function jsx harmony <button onClick={this.handleClick(id)} /> handleClick = (id) => () => { console.log("Hello, your ticket number is", id) };