notes

• Class components use lifecycle methods.
• Functional components use Hooks.
• Modern React prefers functional components.

Context API allows sharing global data without prop drilling.

• Create using React.createContext()
• Wrap with Provider
• Consume using useContext()

Pure Component

• Same output for same props & state.
• No side effects inside render.
• Predictable and easy to test.

function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

Impure Component

• Output may change without prop/state change.
• Uses external variables or random values.

let count = 0;

function Counter() {
  count++;
  return <h1>Count: {count}</h1>;
}

React.PureComponent vs React.memo

Interview Tip: Prefer React.memo in modern React applications since functional components are the standard now.

What are Portals?

Portals allow rendering a component outside its parent DOM hierarchy while keeping it inside the same React component tree.

• Used for Modals, Tooltips, Dropdowns, Overlays.
• Helps avoid CSS overflow / z-index issues.
• Still supports event bubbling through React tree.

How Portals Work

Instead of rendering inside #root, you render into another DOM node.

Step 1: Add a div in index.html

<div id="root"></div>
<div id="portal-root"></div>

Step 2: Create Portal Component

import ReactDOM from "react-dom";

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById("portal-root")
  );
}

Step 3: Use It

function App() {
  return (
    <>
      <h1>Main App</h1>
      <Modal>
        <p>This is rendered using Portal</p>
      </Modal>
    </>
  );
}

Key Interview Points

• Portals do NOT break React’s event bubbling.
• They only change DOM placement, not React hierarchy.
• Useful for UI layers (modals, popups).

Interview Tip: Portals solve UI layering problems without breaking React’s component structure.

Redux Thunk

• Thunk is a middleware that lets you write action creators returning a function instead of an action.
• Great for simple async flows: dispatch before/after API calls.
• Lower learning curve and smaller bundle size.

// actions.js
export const fetchUsers = () => async (dispatch, getState) => {
  dispatch({ type: 'USERS_REQUEST' });
  try {
    const res = await fetch('/api/users');
    const data = await res.json();
    dispatch({ type: 'USERS_SUCCESS', payload: data });
  } catch (err) {
    dispatch({ type: 'USERS_FAILURE', error: err.message });
  }
};

// store.js
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducer';

const store = createStore(rootReducer, applyMiddleware(thunk));

Redux Saga

• Saga is a middleware for managing complex async side effects using generator functions.
• Provides powerful effects like takeEvery, takeLatest, call, put, and cancellation.
• Great for orchestrating flows, retries, debouncing, and complex business logic.

// sagas.js
import { call, put, takeLatest } from 'redux-saga/effects';

function* fetchUsersWorker() {
  try {
    const res = yield call(fetch, '/api/users');
    const data = yield call([res, 'json']);
    yield put({ type: 'USERS_SUCCESS', payload: data });
  } catch (err) {
    yield put({ type: 'USERS_FAILURE', error: err.message });
  }
}

export function* usersSaga() {
  yield takeLatest('USERS_REQUEST', fetchUsersWorker);
}

// store.js
import createSagaMiddleware from 'redux-saga';
import { applyMiddleware, createStore } from 'redux';
import rootReducer from './reducer';
import { usersSaga } from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(usersSaga);

Thunk is a Redux middleware that allows action creators to return a function instead of an action object. Redux Thunk is middleware that allows action creators to return functions instead of objects, enabling asynchronous logic like API calls before dispatching actions.

When to Choose Which?

• Thunk: Simple async needs, few API calls, minimal orchestration.
• Saga: Complex workflows, background tasks, cancellation, debouncing, sequencing.

Interview Tip: Start with Thunk for simplicity; move to Saga when side-effect complexity grows and testability/orchestration become priorities.