React essentials check

Loading learning content…

Question 1 of 12Which operation belongs directly in a React component's render calculation?

Deriving a full name from propsWriting a value to local storageStarting a repeating timer

Question 2 of 12A child component needs to request that its parent change shared state. What is the clearest React pattern?

Pass a callback prop from the parent to the childLet the child directly mutate the propLet the child search the parent component for its state

Question 3 of 12A new count depends on the previous count. Which update is the most reliable?

setCount((current) => current + 1)setCount(count + 1)count += 1

Question 4 of 12Which approach correctly marks one task as complete without mutating an array stored in state?

Use map and return a copied object for the matching taskChange task.done directly inside the existing state arrayPush the changed task into the same array

Question 5 of 12When is extracting a smaller React component most useful?

When it creates a meaningful boundary for reuse, behavior, testing, or readabilityWhenever a file passes an arbitrary line countWhenever you want to avoid passing props

Question 6 of 12A component has loading, error, and success states. Which approach is usually easiest to read?

Use clear conditional branches or early returns for major statesPut every state inside deeply nested ternary expressionsUse an effect to manually insert the correct DOM

Question 7 of 12Which value is usually the best React key for items in a reorderable list?

A stable ID from the underlying dataThe item's current array indexA new random value generated during every render

Question 8 of 12Where should a React form normally handle its submission logic?

In the form's onSubmit handlerDuring the submit button's renderInside an effect attached to every input

Question 9 of 12Which task is an appropriate use of useEffect?

Synchronizing document.title with React stateAdding item prices together for displayCombining firstName and lastName into a string

Question 10 of 12Which use case is a good fit for useRef?

Keeping a reference to an input so it can be focusedStoring a count that must immediately update the UIComputing a label from props

Question 11 of 12What is the main purpose of a custom React hook?

Extract reusable stateful behavior behind a focused APIReplace all presentational components with functions that return dataAllow hooks to be called conditionally

Question 12 of 12When should useMemo, useCallback, or memo usually be introduced?

When a real performance or referential-equality need has been identifiedIn every component by defaultWhenever local state is used

Choose one answer for every question, then check your answers.