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. ReactJS is maintained by facebook, Instagram and a community of individual contributers. It has nothing to do with the backend or controller of the application.
2. Advantages of using ReactJS.
React helps design simple declarative views for each state in your application. Encapsulated components. Dynamic properties & state . Increases the application's performance by using Virtual DOM. Completely independent of the rest of the application. Can render on the client or the server. JSX ma...
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. It is more lightweight and works faster.
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 expressiveness of JavaScript along with ...
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. It is a library for building composable user interfaces that enables the creation of reusable UI components which present data that changes over time.
7. What are the major features of React?
It uses VirtualDOM instead RealDOM that avoids RealDOM manipulations which are expensive. Supports server-side rendering. Uses Unidirectional data flow or data binding. Leverages reusable/composable UI components to develop the view.
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 need to pass the data to the children elements.
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). Context provides a way to pass data through the component tree without ...
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. Web browsers cannot read JSX directly because they are built to only read regu...
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. render() { return ( React Fragment example
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. The component gets the updated state and React decides if it should re-render the component.
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. use "useState" hook to store the state if that state needs to be sync/utilized in the rendered view. For all other needs, utilize variables.
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. class Hello extends React.Component { render() { return < h1 > Hello, { this .props.username} < /h1>; } } You must define in a React.Component subclass, the only method...
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. The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass...
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. Creating a React element is cheap. Once an element is created, it is never mutated. The object representation of React E...
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 class component right in your function component...
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. Props get passed to the component similar to function parameters whereas the state is managed within t...
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. It schedules an update to a component's state object. When state changes, the component responds by re-rendering.
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. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple fram...
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 handleChange as below, handleChange(event) { ...
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 the state to parent instead of maintaining local state in both of the...
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:
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 in constructors of the whole...
34. What is ReactDOMServer?
The ReactDOMServer object enables you to render components to static markup. Typically, its used on a Node server. This object is mainly used for server-side rendering (SSR). // ES modules import ReactDOMServer from 'react-dom/server' ; // CommonJS var ReactDOMServer = require( 'react-dom/server...
35. Differentiate between Real DOM and Virtual DOM.
Real DOM Virtual DOM Real DOM updates happen slowly. Virtual DOM updates faster. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster. takes too much of memory. Takes less memory. Allows direct update of HTML. Cannot update HTML directly.
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. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as
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. In most cases you should never force a React component to re-render; re-rendering should always be done based on state or props changes. Howev...
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. Ease of development and Productivity The Angular CLI eases deve...
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. HOC may be used to add functionality to components. An ideal example of HOC is connect() function in React Redux, that provide...
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 every time. Therefore, it increases performance, as only the upda...
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. Smart components are stateful whereas dumb components are stateless and rely only on props.
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. The elements in a React form cannot directly update their state. Their submission is handled by a JS function, which has full ...
43. Advantages of using REDUX.
Maintainability , the code is easier to maintain. Organized code . Developer Tools , allows developers to track/debug all activities, ranging from actions to state changes, happening in the application in real-time. Easy Testing . Large-scale Community , Redux is backed by a mammoth community. It...
44. Is setState asynchronous?
Yes. setState also has a second parameter that takes a callback function. this .setState( { nsmr : 'javapedia.net' }, () => console.log( 'setState has completed and the component has been re-rendered.' ) )
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. The inner function receives the store methods dispatch and getState as parameters. An ac...
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. class UserComponent extends React.Component { constructor (props) {} render() { return < div > Welcome { this .props.userName} < /div> } } CatCompone...
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. Handling an event in React similar to how we handle it in DOM architecture. Events created in Reac...
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. More readable, testable code as it isolates logic from the components itself.
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. React has 3 APIs for memoization: memo, useMemo, and useCallback. The technique is used in a wide spectru...
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 it only compares props. React.memo doesn't compar...
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. const refContainer = useRef(initialValue);
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. It activates additional checks and warnings for its descendants. You may enable strict mode for any part of your application. Strict mode checks are run in develop...
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!'. An imperative style turns that around and allows you to control your application by saying 'This is what you should...
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 of implementing its own render logic.
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 application. The major benefit of this approach is that data flows through...
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 moving the grandchild as a sibling (becomes new child component (B)) to ...
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 component. This is also called "dumb compon...
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. In other words, we can say that keys are used to give an identity to the elements in the lists. const numbers = [ 1...
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. When it's an empty list/array, the callback will only be fired once, similar to componentDidMount.
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.
Comments & Discussions
|
Interviews Questions |
About Javapedia.net Javapedia.net is for Java and J2EE developers, technologist and college students who prepare of interview. Also this site includes many practical examples. This site is developed using J2EE technologies by Steve Antony, a senior Developer/lead at one of the logistics based company. |
||
| contact: javatutorials2016[at]gmail[dot]com | |||
| Kindly consider donating for maintaining this website. Thanks. |
|||
|
Copyright © 2026, javapedia.net, all rights reserved. Privacy Policy · Terms of Service. 
|
|||