React & JavaScript Essentials

What does it mean to 'Break UI into Components' in React?

It means dividing the UI into small reusable components that each receive props as inputs and output UI

What are props in React?

Props are inputs passed from a parent component to a child component

What is the component hierarchy in Thinking in React?

FilterableProductTable → SearchBar + ProductTable → ProductCategoryRow + ProductRow

What does this hierarchy tell you?

How data and UI are organized into nested components

What does 'Build a Static Version' mean?

Creating UI components that only use props and have no interactivity or state

In a static version

why can't users interact yet?

In this code

what does { product } mean: function ProductRow({ product }) { … }

What does the ternary operator condition ? a : b do?

It chooses between two values depending on whether the condition is true or false

In this code

what does … represent?

What does style={{ color: 'red' }} mean?

It is an inline style using a JavaScript object inside JSX

What criteria make a value deserving of React state?

It changes over time

Why isn't the product list stored as state?

Because it's passed as props and does not change inside the component

What does 'Lift State Up' mean in React?

Moving shared state to the closest common parent component so children can access the same data

Why must SearchBar and ProductTable share state?

Because both depend on filterText and inStockOnly

What does this syntax mean: const [filterText

setFilterText] = useState('');

What initializes the state here?

The empty string '' passed into useState

What does onChange={(e) => onFilterTextChange(e.target.value)} do?

It updates state whenever the user types

What is e.target.value?

The text currently typed into the input field

In Tic-Tac-Toe

what three components is the UI split into?

Why is UI split this way?

To keep rendering logic simple and reusable

What does this state represent: ['X'

'O'

What does move history allow you to do?

Implement time travel to view previous game states

What does this do: onSquareClick(i)}>

Creates an event handler that calls onSquareClick with the index of the clicked square

What does () => … mean in this context?

It creates an arrow function used as a click handler

Why must arrays be updated immutably in React?

Because mutating arrays directly breaks React's ability to detect changes

What is the difference between squares.slice() and […squares]?

Both create a shallow copy

What does this do: const [history

setHistory] = useState([Array(9).fill(null)]);

What does Array(9).fill(null) mean?

It creates an array of length 9 where every item is null

What does useState do in React?

It creates reactive component state and returns [stateValue

What does setCount(count + 1) do?

Updates count by creating a new value and triggering a rerender

What does useEffect handle?

Side effects like data fetching

What does the dependency array [count] mean?

The effect runs whenever the value 'count' changes

What does useRef store?

A mutable value or DOM reference that persists across renders

What does ref={inputRef} mean?

It binds a DOM element to inputRef so React can access it

What is useMemo used for?

Memoizing expensive calculations so they run only when dependencies change

What does useMemo(() => heavyCalc(items)

[items]) mean?

What does useCallback memoize?

Functions

What problem does useCallback help prevent?

Unnecessary re-renders in child components

What is the first rule of Hooks?

Only call hooks at the top level of a component

What is the second rule of Hooks?

Only call hooks inside React function components or custom hooks

What are React-DOM hooks used for?

Browser-specific tasks like forms

Why are React-DOM hooks rarely used by beginners?

They solve advanced DOM integration problems

What does spread syntax … do?

Expands arrays or objects into individual elements or properties

What is the opposite of spread syntax?

Rest syntax

What does […nums] do?

Creates a shallow copy of the nums array

What does [0

…nums] produce if nums = [1

What does { …base

c:3 } do?

What does …base mean inside an object literal?

Copies all enumerable properties from base

Why is spread syntax used in React state updates?

Because state must be immutable and spread creates a new array/object

What does setTodos([…todos

newTodo]) do?

What does function sum(…nums) mean?

Rest syntax that collects all arguments into the nums array

How is rest different from spread?

Rest collects into an array; spread expands an array

What is the best way to learn React?

Build things and recreate tutorials like Tic-Tac-Toe

Which three hooks make up 80% of React usage?

useState