React.js Interview Question

What is React.js?

• React is a JavaScript library for building user interfaces, particularly single-page applications. It allows developers to create reusable UI components, manage state, and efficiently update the DOM.

What are Components in React?

• Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types,

           Functional Components (with Hooks)

          Class Components (with life cycle methods)

What is JSX?

• JSX combines HTML and JavaScript in a single syntax, allowing you to create UI components in React. It simplifies rendering dynamic content by embedding JavaScript expressions inside HTML-like tags.

Const element = <h1>Hello, world! </h1>;

What is the Virtual DOM?

• The virtual DOM is a lightweight copy of the real DOM. React uses it to detect changes and update only the parts that changed, improving performance.

What is the Difference Between props and state?

   props

• The Data is passed from one component to another.
• It is Immutable (cannot be modified).
• Props can be used with state and functional components.
• Props are read-only

  state

• The Data is passed within the component only.
• It is Mutable (can be modified).
• The state can be used only with the state components/class component (Before 16.0).
• The state is both read and write

What are React Hooks?

• Hooks are functions that let you use state and lifecycle methods in functional components.
  Common hooks:
• useState(),useEffect(),useContext(),useRef(),useMemo().

What is the Difference Between Controlled and Uncontrolled Components?

• Controlled components: Form data is handled by React via useState().
• Uncontrolled components: Form data is handled by the DOM, accessed using useRef().

What is Functional Component?

• A functional component is a React component defined as a function that accepts props as an argument and returns JSX.

 

                     function Welcome(props) {

                                   return <h1>Hello, props.name}</h1>;

                               }

What is Class Component?

• Class components are basically JavaScript Object Oriented classes with functions you can use to render React components. The advantage of using classes in React is that they contain lifecycle methods that identify when state changes and update the global state or the component state using the keyword this.

 

         import React from “react”;

 

                      class Welcome extends React. Component {

                               render() {

                                     return <h1>Hello, {this.props.name}</h1>;

                               }

                          }

 What is the Purpose of keys in React lists?

• Keys help React identify which items have changed, are added, or are removed. They improve performance during list rendering.

{items. Map(item => <li key={item.id}>{item.name}</li>)}

What is Redux and why is it used with React?

• Redux is a state management library that stores the application’s state in a single global store, making state predictable and easier to manage across components.

What is React Context API?

• Context API provides a way to pass data through the component tree without having to pass props manually at every level (useful for themes, auth, etc.).

What is memoization in React?

• React provides React.memo() and useMemo() to optimize performance by preventing unnecessary re-renders.

What are higher-order components (HOC)?

• A Higher-Order Component is a function that takes a component and returns a new component. It’s used for reusing component logic.

const EnhancedComponent = withAuth(Component);

Difference between useEffect and useLayoutEffect?

• useEffect: Runs after paint (asynchronously).
• useLayoutEffect: Runs before paint (synchronously), useful for layout-related changes.

What are the components of Redux?

• Redux has three main components: the store (which holds the application state), actions (which describe what to do), and reducers (which define how the state changes in response to actions)

What is React Router?

• React Router library adds navigation and routing to single page React applications. It lets you define routes and navigate between different components without reloading the page.

Why do we need to React Router?

• React Router allows seamless navigation in a single-page application (SPA) by managing URL changes without refreshing the page, improving user experience and enabling multi-view applications.

How do you implement React routing?

• To implement React routing, install react-router-dom, define routes using Route and Switch components, and use Link or NavLink to navigate between them without reloading the page. Considering we have the components App, About, and Contact in our application:

What is the difference between React and Angular?

• React is a JavaScript library, while Angular is a framework. React uses one virtual DOM and one-way data binding and has a small bundle size. Conversely, Angular uses real DOM and two-way data binding and is lighter and faster.

 

 

 

Social tagging: full stack React Questions > interview preparation of react course > React Question