Web / ReactJS Interview questions
1. What is React?
React is an Open source Javascript library for building dynamic User interfaces (UI). React works on the "V" in MVC pattern....
2. Advantages of using ReactJS.
React helps design simple declarative views for each state in your application. Encapsulated components....
3. Explain Virtual DOM.
ReactJS abstracts away the DOM and creates its own version which is simplified and includes the information that you need. Virtual DOM helps identify which portion of DOM has changed.
4. What is JSX?
JSX, or JavaScript XML, is an extension to the JavaScript language syntax.Similar in appearance to HTML, JSX provides a way to structure component rendering using a syntax familiar to many developers. JavaScript XML(JSX) is used by React which utilizes the...
5. Who created ReactJS?
React.js is maintained by Facebook and a community of individual developers and companies. The initial release was in 2013.
6. is ReactJS an MVC framework?
No. ReactJS is NOT an MVC framework.
7. What are the major features of React?
It uses VirtualDOM instead RealDOM that avoids RealDOM manipulations which are expensive. Supports server-side rendering.
8. Mention a few React hooks.
The basic hooks are, useState, useEffect, useContext.
9. What is useContext in react?
useContext hook allows passing data to children elements without using redux. useContext is a named export in react so we can import into functional components like import {useContext} from 'react'; It is an easy alternative to Redux if we just...
10. What is context in React?
React's context allows you to share information to any component, by storing it in a central place and allowing access to any component that requests it (usually you are only able to pass data from parent to child via props)....
11. What is the need for Babel in React?
Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript. Babel transpiles JSX to vanilla Javascript and also converts the ES6 code to a code that is compatible with the browsers....
12. What are React fragments?
React fragments are a common pattern in React for a component to return multiple elements. Fragments let you group a list of children without having to add extra nodes to the DOM....
13. How do you specify CSS class for HTML elements in React?
Use className attribute instead of class.
14. What are Custom hooks in React?
A custom hook enables you to extract some component's logic into a reusable functionality. A custom hook is a Javascript function that starts with use (for example, useLogging, useReduxStore) and that can call other hooks as well.
15. What is PropTypes in react?
PropTypes exports a range of validators that can be used to make sure the data you receive is valid. For performance reasons, propTypes is only checked in development mode.
16. When does React decide to re-render a component?
React re-render a component when its state or prop has changed. The state can change from a props change, or from a direct setState change.
17. Difference between using "useState" hook and just a variable in React.
useState rerenders the view. Variables by themselves only change in memory and the state of your app can get out of sync with the view....
18. How do you create a Class component in React?
React lets you define components as classes or functions. To define a React component class, you need to extend React.Component....
19. What are the lifecycle methods of class Component in React?
The lifecycle methods are executed in the following order when a component instance being created and inserted into the DOM. Mounting: constructor() static getDerivedStateFromProps() render() componentDidMount() Updating: static getDerivedStateFromProps() shouldComponentUpdate() render() getSnaps
20. What is the role of constructor() in React components?
Implement a constructor in your React component when, Initializing local state by assigning an object to this.state. Binding event handler methods to an instance....
21. Difference between Shadow DOM and Virtual DOM.
The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The Virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
22. Difference between Element and Component.
An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props....
23. When to use a Class Component over a Function Component?
If the component needs state or lifecycle methods then use class component otherwise use function component. However, from React 16.8 with the addition of Hooks, you could use state , lifecycle methods and other features that were only available in...
24. What is React PureComponent?
React.PureComponent is similar to React.Component except that React.Component doesn't implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison. If your React component's render() function renders the same result given the same props and sta
25. Difference between state and props in React.
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 components....
26. Why should we not update the react component state directly?
If you try to update state directly then it won't re-render the component. use setState() method to update the state of a variable.
27. What are synthetic events in React?
SyntheticEvent is a cross-browser wrapper around the browser's native event. Its API is the same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
28. What is React Fiber?
React Fiber is the reimplementation of React's core algorithm. The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures....
29. What are controlled components?
A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function. For example, to write all the names in uppercase letters, we use...
30. 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.
31. What is Lifting State Up in React?
When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move...
32. How to write comments in React?
The comments in React/JSX are similar to JavaScript Multiline comments but are wrapped in curly braces. Single-line comments: <div> {/* Single-line comments */} {`Welcome ${user}!`} </div> Multi-line comments: <div> {/* Multi-line comments for more than one line */} {`Welcome ${user}!`}...
33. What is Error Boundaries in React?
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and...
34. What is ReactDOMServer?
The ReactDOMServer object enables you to render components to static markup. Typically, its used on a Node server....
35. Differentiate between Real DOM and Virtual DOM.
Real DOM Virtual DOM Real DOM updates happen slowly. Virtual DOM updates faster....
36. What is the purpose of render() in React.
Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component....
37. How do I force a React component to re-render?
React components render and update based on a change in state or props automatically. Update the state from anywhere and suddenly your UI element updates....
38. How is React different from Angular?
Criteria React Angular Learning Curve Angular has its own learning curve but comparitively easy . React has steep learning curve as it doesn't include routing library and need onboarding of state management libraries ilke Redux/MobX....
39. What are Higher-order components in React?
A higher-order component is a function that takes a component and returns a new component. Higher-order components enable code reuse and ideal for cross-cutting patterns....
40. Why do we need to use keys in Lists?
A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists. It also helps to determine which components need to be re-rendered instead of re-rendering all the components...
41. Difference between Dumb components and Smart components in React.
Dumb components and smart components are a design pattern in React. Smart components handle and process the business logic while dumb components directly render the UI.
42. How do you create a form in React?
React forms are identical to HTML forms. However, the state is contained in the state property of the component in React and is updateable only via the setState() method....
43. Advantages of using REDUX.
Maintainability , the code is easier to maintain. Organized code ....
44. Is setState asynchronous?
Yes. setState also has a second parameter that takes a callback function.
45. What is prop drilling?
Prop Drilling is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around.
46. Explain Redux Thunk.
Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of action or to dispatch only if a certain condition is met....
47. What are default props in React?
defaultProps is a property in React component used to set default values for the props argument. It will be changed if the prop property is passed....
48. What are events in React?
When some actions are performed in React, such as hovering the mouse or pressing a key, clicking the button, trigger events. These events perform a set of activities as a response to these triggers....
49. Advantages of React hooks.
Eliminates the need for class-based components, lifecycle hooks, and this keyword. Hooks makes it easy to reuse logic, by consolidating common functionality into custom hooks.
50. What is memoize in React?
Memoizing in React is a performance feature of the framework that aims to speed up the render process of components. Memoization works like caching so for the same input return cached output....
51. How do I implement shouldComponentUpdate using React hooks?
You can wrap a function component with React.memo to shallowly compare its props: const Button = React.memo((props) => { // your component }); It's not a Hook because it doesn't compose like Hooks do. React.memo is equivalent to PureComponent, but...
52. Explain useRef hook in React.
useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
53. What is Strict Mode in React?
StrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI....
54. What is the main difference between useRef and useState hooks?
useState triggers re-render, useRef does not. useRef works similar to useState in all other aspects, such as, retaining values between renders, except that useRef itself doesn't trigger re-render.
55. Difference between declarative and imperative programming?
React supports declarative programming. A declarative style, like what react has, allows you to control flow and state in your application by describing 'It should look like this!'....
56. What is "Render Props" pattern/technique in React?
The term "render prop" refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead...
57. What is unidirectional data flow in react?
Unidirectional data flow is a technique that is mainly found in functional reactive programming. It is also known as one-way data flow, which means the data has one, and only one way to be transferred to other parts of the...
58. What is "Lift State Up" pattern in React?
Lifting the state from local child components to the closest ancestor is called lifting the state up in React. If the state of a parent component is used by a child component (A) as well as its grandchild component, consider...
59. What are React controlled components and uncontrolled components?
A Controlled Component takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled...
60. What is the purpose of REF in react?
The ref is used to return a reference to the element. Refs should be avoided in most cases, however, they can be useful when we need DOM measurements or to add methods to the components.
61. What is a key in React?
A "key" is a special string attribute included when creating lists of elements in React. Keys are used by React to identify which items in the list are changed, updated, or deleted....
62. Why is "class" attribute is "className" in React?
"class" is a reserved keyword in JavaScript. Since we use JSX in React which itself is the extension of JavaScript, so we have to use className instead of the class attribute.
63. How would delay an API call until the component has mounted?
In a class component, make the API call from componentDidMount() life cycle method. In a functional component, use useEffect hook to make the API call with the second argument as an empty array....
64. Can I use ternary (or) && Operator to conditionally render React components?
Yes, it is common to use ternary or && operators for conditional rendering. Always keep in mind that && evaluate right side only if the left side operand evaluates to true.
