React JS Interview Questions
1 .
What are props in React?
Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.
 
The primary purpose of props in React is to provide following component functionality:
 
* Pass custom data to your component.
* Trigger state changes.
* Use via this.props.reactProp inside component's render() method.

For example, let us create an element with reactProp property:
 
<Element reactProp={'1'} />

This reactProp (or whatever you came up with) name then becomes a property attached to React's native props object which originally already exists on all components created using React library.
 
props.reactProp
2 .
What is the difference between state and props?
Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.
3 .
What is the purpose of callback function as an argument of setState()?
The callback function is invoked when setState 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 lifecycle method rather than this callback function.
 
setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'))
4 .
What is the use of refs?
The ref is used to return a reference to the element. They should be avoided in most cases, however, they can be useful when you need a direct access to the DOM element or an instance of a component.
5 .
What are the lifecycle methods of ReactJS? What are the lifecycle methods of ReactJS?
componentWillMount : Executed before rendering and is used for App level configuration in your root component.
componentDidMount : Executed after first rendering and here all AJAX requests, DOM or state updates, and set up eventListeners should occur.
componentWillReceiveProps : Executed when particular prop updates to trigger state transitions.
shouldComponentUpdate : Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a rerender if component receives new prop.
componentWillUpdate : Executed before re-rendering the component when there are pros & state changes confirmed by shouldComponentUpdate which returns true.
componentDidUpdate : Mostly it is used to update the DOM in response to prop or state changes.
componentWillUnmount : It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
6 .
What is Redux?
It is one of the most in-demand libraries for front-end development in today’s growing world. It is defined as the predictable state container mainly designed for JavaScript apps and also it is used for managing the entire state of an application. Redux is very small in size and has no dependencies. It builds applications that are easy to deploy in different environments and easy to test. Redux is very small in size and has no dependencies.
7 .
What is Use of Redux thunk?
Redux thunk acts as middleware which allows an individual to write action creators that return functions instead of actions. This is also used as a delay function in order to delay dispatch of an action if a certain condition is met. The two store methods getState() and dispatch() are provided as parameters to the inner function.
 
In order to activate Redux thunk, we must first use applyMiddleware() method as shown below:
import{ createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
 
//Note: this API requires redux@>=3.1.0
 
const store= createStore(
     rootReducer,
     applyMiddleware(thunk)
);
8 .
What do you know about Flux?
Basically, Flux is a basic illustration that is helpful in maintaining the unidirectional data stream.  It is meant to control construed data unique fragments to make them interface with that data without creating issues. Flux configuration is insipid; it's not specific to React applications, nor is it required to collect a React application.  Flux is basically a straightforward idea, however in you have to exhibit a profound comprehension of its usage.
9 .
What are Synthetic events in React?
React implements Synthetic events to improve the consistency and performance of applications and interfaces. The synthetic event is a cross-browser wrapper around the browser’s native event. It combines the behaviour of multiple browsers into a single API to make sure events have the same properties across different browsers and platforms.
10 .
What are forms in React?
React employs forms to enable users to interact with web applications.
 
Using forms, users can interact with the application and enter the required information whenever needed. Form contain certain elements, such as text fields, buttons, checkboxes, radio buttons, etc,.

Forms are used for many different tasks such as user authentication, searching, filtering, indexing, etc,.