React Interview Questions 21-25 (SSR vs CSR, HOCs, Portals, Forms, Testing)

Welcome to the final lesson of our React interview series. You have built a solid foundation in components, hooks, and performance. Now, we zoom out to look at Architecture and Quality Assurance.

As a Full-Stack developer, these questions are your home turf. We will discuss how the code gets delivered to the user (SSR vs CSR), advanced composition patterns that resemble Python decorators, managing complex forms, and ensuring your code actually works via testing. Let's finish strong.

21. What is the difference between Server-Side Rendering (SSR) and Client-Side Rendering (CSR)?

This is the fundamental architectural decision for modern web apps.

Analogy:
CSR: You buy flat-pack furniture (IKEA). It arrives in a box (the JS bundle). You have to assemble it yourself before you can sit down.
SSR: You buy a pre-assembled sofa. It arrives ready to sit on immediately.

22. What are Higher-Order Components (HOCs)?

A Higher-Order Component is a function that takes a component and returns a new component with additional props or logic.

Python Connection: If you know Python Decorators, you know HOCs. They serve the exact same purpose: wrapping functionality around an existing class or function without modifying its internal logic.

// The HOC function
function withLogger(WrappedComponent) {
  return function(props) {
    console.log("Log: Component rendered with props", props);
    // Render the original component with all props passed through
    return <WrappedComponent {...props} />;
  };
}

// The original component
const Button = ({ label }) => <button>{label}</button>;

// The enhanced component
const LoggedButton = withLogger(Button);

// Usage
// <LoggedButton label="Click Me" />

Note: While HOCs are still common in older codebases (and libraries like Redux), modern React prefers Custom Hooks for sharing logic because they are less prone to "wrapper hell" (too many nested components).

23. What are React Portals?

Normally, a component mounts into the DOM as a child of its nearest parent. However, sometimes you want a child to visually "break out" of its container, like a Modal, Tooltip, or Dropdown.

If a parent has overflow: hidden or a complex z-index, your modal might get cut off. Portals allow you to render a component into a DOM node that exists outside the DOM hierarchy of the parent component (usually attached directly to document.body).

import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  // The first argument is the JSX to render
  // The second argument is the DOM node to render INTO
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      {children}
    </div>,
    document.getElementById('portal-root') // This div exists in index.html
  );
};

const App = () => {
  return (
    <div style={{ overflow: 'hidden' }}>
      <h1>My App</h1>
      {/* This Modal renders outside the 'overflow: hidden' div */}
      <Modal>
        <p>I am a modal!</p>
      </Modal>
    </div>
  );
};

24. How do you handle forms in React (Formik/React Hook Form)?

Handling forms manually with useState works for simple inputs, but it becomes painful for large forms. You have to manage validation, error messages, "touched" states (did the user click the field?), and form submission yourself.

Libraries like React Hook Form or Formik solve this. React Hook Form is currently preferred because it is performance-optimized: it often uses uncontrolled components under the hood to prevent the entire form from re-rendering every time you type a single letter.

import { useForm } from "react-hook-form";

const LoginForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 'register' connects the input to the library */}
      <input {...register("username", { required: true })} />
      {errors.username && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
};

25. How do you test React components?

The standard testing stack for React is Jest (the test runner/assertion library) and React Testing Library (RTL) (utilities to render components and interact with them).

Philosophy: "The more your tests resemble the way your software is used, the more confidence they can give you." - Kent C. Dodds.

Do not test implementation details (e.g., "Does the state variable equal 'true'?"). Test user interactions (e.g., "If I click this button, does the text 'Success' appear on the screen?").

// Simple Component
const Button = () => {
  const [text, setText] = useState("Click me");
  return <button onClick={() => setText("Clicked!")}>{text}</button>;
};

// --- The Test ---
import { render, screen, fireEvent } from '@testing-library/react';

test('button changes text on click', () => {
  // 1. Render
  render(<Button />);
  
  // 2. Find element (like a user would)
  const buttonElement = screen.getByText(/click me/i);
  
  // 3. Interact
  fireEvent.click(buttonElement);
  
  // 4. Assert result
  expect(screen.getByText(/clicked!/i)).toBeInTheDocument();
});

Sample Output:

PASS  src/components/Button.test.js
✓ button changes text on click (45ms)

Congratulations! You have completed the 25 essential React interview questions. You have journeyed from the Virtual DOM to High-Order Components, mastered Hooks, and learned how to architect scalable apps with forms and testing.

As a Python Full-Stack developer, connecting these frontend concepts to your backend knowledge (like SSR matching Django's rendering, or HOCs matching decorators) will make you a standout candidate. Good luck!