youtube React refference imp Q&A

What is React and why is it popular?

→ React is popular javascript library for building powerfull user interfaces.

→ its key strength lies in its ability to create components based architecture allows developer to create reusable UI components additionally react’s virtual Dom is able to create copy of the real Dom that minimizes direct Dom manupulation with significantly boost performance.

What is single page application?

→ Single page application is a type of web application that loads a single HTML page and the instead of reloading the whole page only updates the affected parts of the page according to the users actions.

i. Faster Load Times.

ii. Better Responsiveness

iii. smoother user interations

What is JSX and how it is differ from HTML?

→ JSX or Javascript HTML is syntax extension for JavaScript that allows developer to write HTML like code directly into javaScript files

→ key difference is jsx is compulsion to properly close all self-closing tags like image tag or break tag which is also requirement in x HTML but not in our regular HTML.

Explain difference b/w Functional and Class component ?

→ Class components used before hooks we think of them as traditional large and complicated machines on the otherside Functional components came into use majorly after hooks making them the modern easier to use choice in react,

→ the class components were extended from the react.components and included the render method which return JSX state changes the inside components are managed using this.state and updated with this.setState.

→ Funtional components being used more frequently after the introduction of react hooks use hooks like useState and useEffect to handle state and life cycle limits another difference the two is that functional components used to be stateless after the introduction of hooks they were able to manage states

What is difference b/w stateless and statefull components in react?

→ Stateless components don’t manage or store their data they simply receive the data via prompts and display it they are best to use when you don’t need to handle any logic and just want your content to be displayed on the user interface.

→ stateful components on the other hand can manage their own state and can update their existing state based on user interaction or other events. This implies that they can handle complicated logics and produce a required ouput as well, with the introduction of react hooks you choose to keep functional components to be either stateful or stateless.

What are props in react and how they are used?

→ props or properties are a way to pass data from parent component to child component in react, the child component can’t modify these values because they are read-only, instead these values are used to trigger certain actions in the child components.

Diff b/w state and props in React?

→ State is a mutable objects that stores Dynamic Data.

→Props is an immutable object meaning the data cannot be modified.

State is Private and is fully controlled by the component it belongs to.

Props is controlled only by the parent component and cannot be changed by the children.

What are controlled and uncontrolled components?

→ Controlled components are used when control is required over the data being enter into a form such as in the case of form validation where you need to fetch the username and password to validate their authenticity.

→ uncontrolled components on the other hand are used when you do not need to dynamically inspect the user inputs such as a user subscribing to your newsletter or a user uploading a file in these cases react doesn’t need to directly react to the inputs because the data being sent to the server for evaluation.

→ Controlled components are accessed through the state attributes which makes easier to change however since uncontrolled components are managed through Ref it becomes harder to access the values.

What is the purpose of the key attribute in React lists?

→ React understand which element to render based on the key associated with that element key attributes as a name suggests is primarly used to identify each item uniquely when the list rerender. Enabling react to tract and update individual items in the list without having to re-render the entire list.

What are fragments in React?

→ Normally in React, a component must return a single parent element. If you try to return multiple siblings directly, you’ll get an error. Fragments solve this by acting as an invisible wrapper.

→Fragments in React let you group multiple elements without adding extra nodes to the DOM. They act as invisible wrappers, written as <>...</> or <React.Fragment>...</React.Fragment>. They’re especially useful when returning multiple elements from a component or list.

What is the Virtual DOM?

→ The Virtual DOM is a lightweight copy of the real DOM that React keeps in memory. When state changes, React updates the Virtual DOM first, compares it with the previous version using a diffing algorithm, and then applies only the necessary changes to the real DOM. This makes UI updates faster and more efficient.

What are React lifecycle methods?

→ React lifecycle methods are special functions that run at different stages of a component’s life cycle: mounting, updating, and unmounting. They allow developers to run code when a component is created (componentDidMount), updated (componentDidUpdate), or removed (componentWillUnmount). This helps with tasks like data fetching, DOM updates, and cleanup.

Explain the useState and useEffect hooks?

→In React, useState lets you add state to functional components, while useEffect lets you perform side effects like fetching data or setting up subscriptions. useState triggers re-renders when updated, whereas useEffect runs after rendering and can be controlled with a dependency array."

What is props drilling in React?

→ Props drilling in React happens when you pass data through multiple nested components that don’t need it, just to reach the one that does. It makes code harder to maintain, and the common solution is to use the Context API or a state management library to avoid unnecessary prop passing.

What is the Context API?

→The Context API in React is a built-in way to share data across components without passing props manually at every level. It uses a Provider to supply values and the useContext hook to consume them, making it ideal for global data like themes, authentication, or user preferences.

What are HOCs?

→A Higher-Order Component (HOC) in React is a function that takes a component and returns a new component with added functionality. It’s a pattern for reusing logic across components, often used for tasks like authentication, logging, or data fetching.

Reconciliation in React?

→ Reconciliation in React is the process of updating the real DOM efficiently by comparing the new Virtual DOM with the previous one using a diffing algorithm. React applies only the minimal changes needed, which makes UI updates fast and predictable.

Explain React Portals?

→React Portals let you render components into a different DOM node outside their parent hierarchy, while still keeping them part of the React component tree. They’re commonly used for modals, tooltips, and overlays where UI needs to break out of its container.

How does React Router handle navigation in a single-page app?

→ React Router handles navigation in a single-page app by using the HTML5 History API to update the URL without reloading the page. It matches the current URL to defined routes and renders the corresponding component, enabling smooth navigation and dynamic routing.

react-router-dom →BrowserRouter, Routes, Route, Link.

Explain React strict mode?

→ React Strict Mode is a development tool that activates extra checks and warnings to help identify unsafe lifecycle methods, unexpected side effects, and legacy APIs. It doesn’t affect production but ensures your code is cleaner and more future-proof.