Irbisa · Cheatsheet

React Fundamentals

JSX, components, props, children and composition, conditional rendering, lists and keys, one-way data flow, React 19 basics

Junior Developer · 21 questions

  1. 01

    What is React, and what does it mean that React is declarative?

    React is a JavaScript library for building user interfaces out of components.

  2. 02

    What is the virtual DOM, and does it make React faster than the real DOM?

    The virtual DOM is the tree of plain JavaScript objects (React elements) that your components return.

  3. 03

    What is JSX, and what does it compile to?

    JSX is a syntax extension that lets you write markup inside JavaScript.

    import { jsxs as _jsxs } from 'react/jsx-runtime'; const name = 'Ada'; // What you writeconst written = <h1 className="title">Hello, {name}</h1>;…
  4. 04

    What is a React component, and why must its name start with a capital letter?

    A component is a JavaScript function that takes props and returns JSX.

    interface AvatarProps {  name: string;  url: string;} function Avatar({ name, url }: AvatarProps) {…
  5. 05

    What is the difference between class and function components, and is there anything you still need a class for?

    A class component extends React.Component, keeps its state in this.state and reacts to mounting and updates in lifecycle methods; a function component is a plain function that uses hooks.

    import { Component, useState } from 'react'; // class: one state object that setState merges into; handlers need `this`export class ClassCounter extends Component<{ step: number }, { count: number }> {  state = { count: 0 };…
  6. 06

    What are props, and why can a component not change its own props?

    Props are the inputs a parent passes to a child component, like arguments to a function.

  7. 07

    What is the difference between props and state?

    Props are data a component receives from its parent and cannot change; state is data a component owns and changes itself through a setter, such as the one useState returns.

  8. 08

    What is the children prop, and why does React prefer composition over inheritance?

    children is the JSX nested between a component's opening and closing tags, passed to it as a prop.

    import type { ReactNode } from 'react'; interface CardProps {  title: string;  footer?: ReactNode;  children: ReactNode;…
  9. 09

    What are the ways to render something conditionally in JSX?

    Use plain JavaScript: an if with an early return before the JSX, the ternary `cond ?

    interface InboxProps {  loading: boolean;  error?: string;  unread: number;  isAdmin: boolean;}…
  10. 10

    How do you render a list in React, and why does each item need a key?

    You map an array to JSX: `items.map(item => <Row key={item.id} ...

    interface Todo {  id: string;  title: string;  done: boolean;}…
  11. 11

    What is a Fragment, and when do you need one?

    A Fragment, written <>...</> or <Fragment>, groups several elements without adding a DOM node.

    import { Fragment } from 'react'; interface Term {  id: string;  word: string;  meaning: string;…
  12. 12

    How do you start a new React project in 2026, and why is create-react-app deprecated?

    Use a framework such as Next.js or React Router when the app needs routing, data loading and server rendering, or Vite for a client-only app.

  13. 13

    What does this component render when the cart is empty, and how do you fix it?

    interface CartProps {  items: string[];} export function Cart({ items }: CartProps) {  return (    <div>      <h2>Cart</h2>      {items.length && <p>{items.length} items in your cart</p>}    </div>  );}

    With an empty cart it renders a stray 0 under the heading.

  14. 14

    Find the bug: after the first row is deleted, the note typed in it shows up in the next row.

    import { useState } from 'react'; function Row({ title }: { title: string }) {  const [note, setNote] = useState('');  return (    <li>      {title} <input value={note} onChange={(e) => setNote(e.target.value)} />    </li>  );} export function List({ items }: { items: { id: string; title: string }[] }) {  return <ul>{items.map((item, index) => <Row key={index} title={item.title} />)}</ul>;}

    The list uses the array index as key.

  15. 15

    What does one-way data flow mean in React, and how does a child send data back to its parent?

    Data flows down: a parent passes values to its children as props, and the children cannot change them.

    import { useState } from 'react'; interface FilterProps {  value: string;  onChange: (value: string) => void;}…
  16. 16

    Why must a React component be pure, and what counts as a side effect during render?

    React may call a component many times, in any order, or throw a render away (StrictMode, concurrent rendering), so rendering must only compute JSX from props, state and context.

    let renderCount = 0; // wrong: mutates a module variable during renderexport function CupBad({ guest }: { guest: number }) {  renderCount++;  return <h2>Tea cup #{renderCount} for guest {guest}</h2>;…
  17. 17

    Find the bug: the search input loses focus after every keystroke.

    import { useState } from 'react'; export function SearchPage() {  const [query, setQuery] = useState('');   function SearchBox() {    return <input value={query} onChange={(e) => setQuery(e.target.value)} />;  }   return (    <main>      <SearchBox />      <p>Results for {query}</p>    </main>  );}

    SearchBox is declared inside SearchPage, so every render creates a new function, which React sees as a new component type.

  18. 18

    What breaks when a component is called as a function, {Row({ item })}, instead of rendered as <Row item={item} />?

    import { useState } from 'react'; type Item = { id: string; title: string; details: string }; function Row({ item }: { item: Item }) {  const [open, setOpen] = useState(false);  return (    <li onClick={() => setOpen(!open)}>      {item.title} {open && item.details}    </li>  );} export function List({ items }: { items: Item[] }) {  return <ul>{items.map((item) => Row({ item }))}</ul>;}

    Row stops being a component: React never sees it, so its useState becomes a hook of List, one per item.

  19. 19

    Which class lifecycle methods map to which hooks, and which ones have no direct hook equivalent?

    componentDidMount, componentDidUpdate and componentWillUnmount merge into one useEffect with a cleanup, shouldComponentUpdate becomes memo, and constructor state becomes useState.

    import { Component, useEffect } from 'react'; // before: three lifecycle methods keep one connection in syncexport class ChatRoomClass extends Component<{ roomId: string }> {  connection = createConnection(this.props.roomId);…
  20. 20

    What changed in React 19 that you notice in everyday component code?

    React 19 (December 2024) made ref a regular prop, so forwardRef is no longer needed, and added Actions with useActionState, useFormStatus and useOptimistic, the use API, <Context> as a provider and <title> and <meta> support inside components.

    import type { ComponentProps } from 'react'; // React 19: ref arrives as a normal prop, no forwardRef wrapperfunction TextInput({ ref, ...props }: ComponentProps<'input'>) {  return <input ref={ref} className="input" {...props} />;}…
  21. 21

    When does React keep a component's state and when does it reset it, and how do you use key to force a reset?

    React ties state to a component's position in the tree.

    import { useState } from 'react'; function ChatInput({ contact }: { contact: string }) {  const [draft, setDraft] = useState('');  return (    <textarea…