The Ultimate Knowledge Hub
Answer: JSX (JavaScript XML) is a syntax extension for JavaScript used with React to describe UI elements.
const element = <h1>Hello, world!</h1>;
JSX gets transpiled to React.createElement calls.
Answer: Virtual DOM is a lightweight JavaScript representation of the real DOM. When state changes, a new virtual DOM is created and compared with the previous one using diffing algorithms. Only the changed elements are updated in the real DOM.
Answer: Hooks are functions that let you use state and lifecycle features in functional components.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
useEffect and useLayoutEffect?Answer:
useEffect: Runs asynchronously after the paint.
useLayoutEffect: Runs synchronously after all DOM mutations and before the browser paints.
Answer: To enable state and lifecycle features in functional components
useRef?Answer: useRef is used to persist values across renders without causing re-renders. It's also used to access DOM elements directly.
const inputRef = useRef();
<input ref={inputRef} />
Answer: Lifting state up refers to moving state to a common ancestor component to share data between sibling components.
Answer: HOCs are functions that take a component and return a new component with enhanced behavior.
const withLogging = (Component) => (props) => {
console.log('Rendering');
return <Component {...props} />;
};
key in a list?Answer: Keys help React identify which items have changed, are added, or removed. They should be stable and unique.
Answer: Fragments let you group elements without adding extra nodes to the DOM.
<>
<td>Cell1</td>
<td>Cell2</td>
</>
Answer:
Props: Read-only, passed from parent to child.
State: Local, managed within the component.
useReducer.Answer: useReducer is used for complex state logic.
const [state, dispatch] = useReducer(reducer, initialState);
Answer: Context provides a way to pass data through the component tree without props drilling.
Answer: Passing props down multiple levels which can be avoided using context or state management libraries.
Answer: Use error boundaries.
class ErrorBoundary extends React.Component {
componentDidCatch(error, info) { ... }
}
Answer: React compares the virtual DOM and applies minimal changes using a diffing algorithm.
Answer: Lazy loading allows you to load components only when they are needed.
const LazyComponent = React.lazy(() => import('./Component'));
Answer: Suspense is used to handle the loading state of lazy components.
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
Answer: Class components use lifecycle methods and this, while functional components use hooks and are more concise.
Answer: Controlled components rely on React state; uncontrolled ones use DOM references.
Answer: Building generic components that can be reused with different props.
Answer: Memoization avoids re-renders if props/state don’t change.
React.memo(MyComponent);
Answer:
Use React.memo, useCallback, useMemo
Avoid inline functions in render
Code-splitting
useMemo?Answer: Caches expensive calculations.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useCallback?Answer: Caches function instances.
const memoizedFn = useCallback(() => doSomething(a), [a]);
Answer: A component that re-renders only if props/state change.
Answer: A component that does not manage any internal state.
Answer: Load images as needed.
<img loading="lazy" src="image.jpg" />
Answer: They create new function instances and cause unnecessary re-renders.
Answer: Use virtualization libraries like react-window or react-virtualized.
Answer:
Debounce: Waits for a pause.
Throttle: Executes every interval.
Answer: A pattern for sharing code between components using props as functions.
Answer: Breaking code into smaller bundles to load on demand.
Answer: Delays rendering until the component is ready.
Answer: Components that work together and share implicit state.
Answer: Helps React identify which items changed.
useLayoutEffect?Answer: When DOM measurements or layout changes are needed immediately.
Answer: Efficient diffing minimizes DOM updates.
shouldComponentUpdate?Answer: A lifecycle method to prevent re-rendering.
Answer: Use React Profiler and DevTools.
Answer: A React framework for server-side rendering and static site generation.
Answer: Routes are based on the file structure in /pages.
Answer: Use square brackets in filenames, e.g. [id].js
getStaticProps?Answer: Generates static pages at build time.
getServerSideProps?Answer: Generates pages on each request.
getStaticPaths?Answer: Used with dynamic routes for static generation.
Link in Next.js?Answer: Used for client-side navigation.
import Link from 'next/link';
<Link href="/about">About</Link>
Answer: Create a file under /pages/api/.
Answer: Optimizes image loading.
import Image from 'next/image';
<Image src="/img.jpg" width={500} height={300} />
Answer: Incremental Static Regeneration updates static pages post-deployment.
Answer: Executes logic before routing.
Answer:
SSR: Per request
SSG: At build
ISR: On-demand re-generation
Answer: New routing mechanism with server and client components.
Answer: Renders on the server, no client-side JS.
next/head?Answer: Manage <head> content like title and meta tags.
Answer: Use .env.local and process.env.MY_VAR
Answer: SSR and head management improve crawlability.
Answer: Use Vercel, Netlify, or self-host with Node.js.
Answer: Next.js prefetches linked pages for faster nav.
Answer: Yes, wrap _app.js with a provider.
Answer: It refers to the process of managing and sharing the state (data) across components.
Answer:
Local state (useState, useReducer)
Context API
Redux
Zustand, Jotai, Recoil (modern alternatives)
Answer: When the app has complex state logic, needs global state, or shared state across many components.
Answer: A predictable state container for JavaScript apps, using actions, reducers, and a centralized store.
Answer: Plain JavaScript objects with a type field, used to signal state changes.
const incrementAction = { type: 'INCREMENT' };
Answer: A pure function that takes the current state and an action, then returns the new state.
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT': return state + 1;
default: return state;
}
}
Answer: The single source of truth that holds the application's state.
import { createStore } from 'redux';
const store = createStore(counterReducer);
Answer: Use react-redux with <Provider> and useSelector, useDispatch hooks.
Answer: A built-in React API for global state management without external libraries.
const MyContext = React.createContext();
Answer: Create a context, provide it, and consume it with useContext().
const value = useContext(MyContext);
useReducer good for?Answer: Managing complex state logic with multiple sub-values.
useReducer different from Redux?Answer: useReducer is local to a component, Redux is global.
Answer: Use Context API or state management libraries like Redux or Zustand.
Answer: A minimalistic and fast state-management solution using hooks.
const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })) }));
Answer: A state management library by Facebook for complex shared state and derived data.
Answer:
Atom: A unit of state
Selector: A derived state computed from atoms
Answer: Functions that sit between dispatching an action and reaching the reducer (e.g., redux-thunk, redux-saga).
Answer: ReactDOM.createRoot()
Answer: Functions that retrieve specific slices of state.
Answer: When multiple components need to share and modify the same state.
Answer: A state that is not directly mutated; instead, new copies are created for updates.
Answer: Use Redux DevTools Extension for real-time inspection and time-travel debugging.
Answer: A library that allows writing immutable state logic with mutable syntax.
Answer: For small/medium apps, yes. For complex apps with middleware and large state trees, Redux is better.
Answer: It groups multiple state updates into a single re-render for better performance.