Refer - REACT
HOC A Higher-Order Component (HOC) in React is a function that takes a component and
returns a new enhanced component with additional functionality. It's a pattern commonly used
for code reusability, logic abstraction, and enhancing component behavior.
Common syntax
Best for enhancing components with additional logic. Where as React hooks are best for
sharing logic
Infinite Scroll
Inside useEffect add scroll event listener for window and whenever Y reaches maxHeight
Update posts
Custom hooks
Should start with use. And called at the top level not inside loops, conditions, nested functions,
or try/catch/finally blocks.
Only inside Functional Components
useIsOnline
useDebounce
ContextAPI
Persisted ThemeContext in LS
Error Boundaries
Error boundaries are special React components that catch JavaScript errors anywhere in their
child component tree and display a fallback UI instead of crashing the whole application.
Error boundaries catch errors during:
Rendering
Lifecycle methods
Inside constructor of child components
They do not catch errors in:
Event handlers
Asynchronous code (like setTimeout, fetch)
Server-side rendering
Errors thrown inside the error boundary itself
Can only be used inside class components
For Functional components can use react-error-boundary package
You can wrap your entire application with <ErrorBoundary> or you can wrap individual
components with <ErrorBoundary>
<Suspense> lets you display a fallback until its children have finished loading.
Portals
Portals are a powerful feature introduced in React 16 that allow components to render their
content outside of the typical parent-child relationship in the DOM. With portals, developers can
render a component’s content at a different DOM node, even outside the root DOM element of
the application
Pure Components
Pure components re-render only when the props passed to the component changes. For
example, if you have a pure child component inside a parent component state changes in the
parent component will not re-render the child component unless the props passed to the child
component change.
To create a pure component, you can use the memo function from React.
React and React-Dom
React is a library for building user interfaces. The package react contains only the
renderer-agnostic code i.e. the core React library, algorithm for computing changes in the UI
and other helpers. The package react-dom contains the code specific to the DOM rendering of
React components.
virtual DOM
The Virtual DOM is a lightweight JavaScript object that represents the actual DOM (Document
Object Model)
Initial Render:
React creates a Virtual DOM tree that mirrors the Real DOM.
Each element in the VDOM is a JS object that describes the corresponding real DOM node.
State/Props Change:
React creates a new Virtual DOM to reflect the updated state.
Diffing Algorithm:
React compares the previous VDOM with the new VDOM
React identifies minimal changes needed to update the real DOM.
Efficient Update:
React applies only the necessary changes to the real DOM instead of re-rendering the entire UI.
Reconciliation
Reconciliation is the process React uses to efficiently update the DOM by comparing the
previous VDOM with the new VDOM.
Diffing Algorithm — React compares the previous and new Virtual DOM trees.
Identifying Changes: React identifies the minimal number of updates required.
Efficient Patching: React applies those changes to the real DOM.
Hydration
Hydration is the process of taking server-rendered HTML and attaching React’s event listeners
and internal state to make it fully interactive on the client side.
It's commonly used in Server-Side Rendering (SSR) frameworks like [Link] to improve
performance and SEO.
forwardRefs
Forward refs in React are used to pass a ref from a parent component to a child component,
allowing the parent to directly access the child's DOM element or React component instance.
What are React Hooks, and why were they introduced?
Hooks were introduced to allow developers to use state and other React features in functional
components without needing to convert them into class components. Common hooks include
useState, useEffect, useContext, etc.
Can you explain the difference between functional and class components
Class Components have lifecycle methods and this [Link] Components are
simpler, use hooks like useState and useEffect, and are preferred in modern React
development.
Explain the concept of code splitting in React.
Code splitting allows the app to load only the necessary JavaScript for the page being viewed,
reducing the initial load time. This can be achieved with [Link] and Suspense.
Redux vs RTK
Redux manual immutability
Rtk immutability using immer
HTTP vs HTTPS
CORS
If a website is hosted on localhost:8000 and its JavaScript code attempts to send a request to a
server running on localhost:9000, the request will fail due to the same-origin policy enforced by
browsers.
Requests made to the same origin are allowed by the browser.
Requests to a different origin (known as cross-origin requests) are blocked by default, resulting
in a CORS error.
When a browser makes a cross-origin request, it includes an Origin header in the request. The
server responds with an Access-Control-Allow-Origin header. If the value in this response
header matches the Origin header from the request, the browser allows access to the response
data. If they do not match, the browser blocks access, resulting in a CORS error.
MISC
React and ReactDOM
In order to work with React in the browser, we need to include two libraries: React and
ReactDOM. React is the library for creating views. ReactDOM is the library used to actually
render the UI in the browser.
