ReactJS Interview Questions
September 29, 2018
What is used to change the state of a React component? setState() and forceUpdate(). Both forceUpdate() and setState() are called within a React Component. Both of these functions tell React to re-render the component.
What are props? Props are the shorthand for Properties in React. They are read-only components. They are always passed down from the parent to the child components throughout the application.
Can a child component send a prop back to the parent? A child component can never send a prop back to the parent component. This help in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.
When is componenDidMount lifecycle method is called? This method is executed after the first rendering and only on the client side.
What is the difference between a class component and a function component? A Functional Component cannot have state or access to lifecycle methods whereas a class component in React can have access to state and lifecycle methods.
What are Stateless Components in React? Stateless components are also known as the functional component in React. When a component is “stateless”, it never mutates the state. With the same inputs, it will always produce the same output. It means it has no knowledge of the past, current or future state changes.
What are callback refs? Callback refs are the recommended way of using refs by React. Instead of passing a ref attribute, you pass a function and give it control over setting and unsetting of a ref. You should avoid using string refs and inline ref callbacks.
What is the process of re-rendering a tree of UI components in React called? It is called Lifecycle methods or hooks. They are special functions provided by React API that help to manipulate a react component by inserting or removing a code snippet when the component itself mounts, updates, or unmounts.
Is it true that Virtual DOM in react manipulates real DOM? Yes. React creates a virtual DOM. When state changes in a component it firstly runs a “diffing” algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.
What is flux? Flux is an architectural pattern which enforces the uni-directional data flow. It controls derived data and enables communication between multiple components using a central Store which has authority for all data. Any update in data throughout the application must occur here only. Flux provides stability to the application and reduces run-time errors.
What is a high order component? A higher-order component is a function that takes a component and returns a new component. HOC’s allow you to reuse code, logic and bootstrap abstraction.
Can you use ref inside a functional component? No, you cannot use ref inside a functional component since functional components are stateless and they produce the same output. However, ref attribute is used to get the reference to a DOM node or an instance of a component in React and then manipulate its instance.
What is used to pass a ref from a parent component its child component? React.forwardRef which is also known as Ref forwarding. It is a technique for automatically passing a ref through a component to one of its children.
What is React Fiber? It is an experimental API that allows you to pass data down through a tree of components without having to use props. Its main goal is to enable incremental rendering of the virtual DOM.
What is a pure function? Do all React components have to act like pure functions with respect to their props? A pure function is a function that doesn’t depend on and doesn’t modify the states of variables out of its scope. Essentially, this means that a pure function will always return the same result given the same parameters so yes.
Explain Lifecycle phases of a React Component? Initial/Mount Phase: This is the phase when the components start the journey of their life to make their way to DOM. Updating Phase: At the time when components are added to DOM and update and rendered when a state or prop changes occur. Unmounting Phase: This is called the final phase of the component in which the component gets destroyed.
What does shouldComponentUpdate() do? This method returns true or false value to determine whether if a component will be updated or not.
How can you access the state of a component inside a member function? Using this.state. The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.
When is lifecycle method componentWillReceiveProps() called? This method is invoked as soon as the props are updated before another render is called.
What is a ref? Refs are the shorthand for References in React. Refs are used to getting the reference to a DOM node or an instance of a component in React.
How would you prevent a component from rendering? Returning null from a component’s render method does not affect the firing of the component’s lifecycle methods.
What are events in react? In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc.
What are the keys? Keys in React are used to identify unique elements in Virtual DOM.