DevAcademy

1. What is React?

A full backend frameworkA JavaScript library for building user interfacesA CSS frameworkA database

2. Does React encourage a declarative or imperative style of UI programming?

ImperativeDeclarativeNeitherBoth equally

3. Is React itself a full framework with built-in routing and data fetching?

Yes, everything is built inNo — it’s a UI library; routing and other concerns come from separate libraries/frameworksOnly in the newest versionOnly when using Next.js

4. Which tool is commonly recommended for quickly starting a new plain React project?

webpack aloneViteBabelESLint

5. What does createRoot(...).render(<App />) do?

Installs ReactAttaches React to a DOM node and renders the given component tree into itCreates a new npm packageCompiles JSX to HTML permanently

6. What is <StrictMode> used for?

Improving production performanceA development-only wrapper that helps catch common mistakesEnforcing TypeScript typesAdding CSS resets

7. What does JSX compile down to?

Raw HTML stringsJavaScript function calls (like React.createElement)CSSWebAssembly

8. What is the JSX equivalent of the HTML class attribute?

classclassNamecssClassstyleName

9. How do you return multiple sibling elements from a component without an extra wrapping <div>?

It’s not possibleWrap them in a Fragment, <>...</>Return them as an array of stringsUse two return statements

10. What must a component’s name always start with?

A lowercase letterA capital letterAn underscoreA number

11. Can a component modify the props it receives?

Yes, freelyNo — props are read-onlyOnly numbers can be changedOnly in class components

12. What does the special children prop contain?

An array of a component’s own state valuesWhatever JSX is nested between a component’s opening and closing tagsA list of a component’s child components’ namesCSS class names

13. What is the purpose of the key prop in a list?

It styles the list itemIt helps React identify which items changed, were added, or were removed between rendersIt sorts the list alphabeticallyIt’s required for CSS to apply

14. Why is using the array index as a key risky?

It’s slower to computeIt can cause React to mismatch state to the wrong item if the list is reordered or filteredIndexes are not valid JavaScript valuesIt only works with strings

15. Does a key value get passed down to the child component as a regular prop?

Yes, alwaysNo — key is used internally by React and not passed as a propOnly in class componentsOnly if named "key"

16. What does React use for conditional rendering?

A special v-if directivePlain JavaScript — if statements, ternaries, and logical operatorsA templating languageCSS media queries

17. What can go wrong with {count && <Component />} if count is 0?

Nothing, it always works correctlyReact renders the literal "0" on screen, since 0 is a falsy but still-renderable valueIt throws an errorThe component always renders regardless

18. What happens when a component returns null?

It throws an errorNothing is rendered for that componentIt renders an empty <div>It renders the text "null"

19. What is wrong with onClick={handleClick()}?

Nothing, it works correctlyIt calls handleClick immediately during render instead of passing it as a reference to call laterIt’s missing a semicolononClick doesn’t accept function calls

20. How do you pass an argument to an event handler in React?

onClick={handleClick(id)}onClick={() => handleClick(id)}It’s not possibleonClick="handleClick(id)"

21. What does event.preventDefault() commonly stop?

All future eventsA browser’s default action, like a form submission reloading the pageReact re-renderingCSS transitions

22. What does useState(0) return?

Just the current valueAn array with the current value and a setter functionAn object with a .value propertyA promise

23. Does calling the state setter update the variable immediately?

Yes, instantlyNo — it schedules a re-render for the next render cycleOnly for numbersOnly in class components

24. Why is setUser({ ...user, age: user.age + 1 }) correct, but mutating user.age directly is not?

Mutating numbers is not allowed in JavaScriptReact detects state changes by comparing references, so a new object is required to trigger a re-renderSpread syntax is required by useStateThere is no real difference

25. What makes an input "controlled" in React?

It has a required attributeIts value is driven by React state and updated via onChangeIt uses a refIt’s wrapped in a <form> tag

26. Which attribute does a controlled checkbox use instead of value?

selectedcheckedactivetoggled

27. Why might you use one state object instead of separate useState calls for each form field?

It’s required by ReactIt reduces boilerplate for forms with many fieldsIt’s the only way to use onChangeSeparate useState calls are not allowed in the same component

28. What is "prop drilling"?

A performance optimization techniquePassing a prop through several intermediate components that don’t use it, just to reach a deeply nested childA way to validate propsA CSS technique

29. How can a component accept more than one distinct content area, beyond just children?

It’s not possibleBy accepting JSX through regular named props, creating multiple "slots"Only by using ContextBy using two separate return statements

30. What is one benefit of favoring composition over one large, heavily-configured component?

It always uses less codeIt avoids threading props through components that don’t actually need themIt removes the need for props entirelyIt automatically improves performance

31. What is the main advantage of CSS Modules over plain imported CSS?

They load fasterClass names are automatically scoped to the component, avoiding naming collisionsThey support animations, unlike plain CSSThey remove the need for a build tool

32. What type of value does the style prop expect?

A CSS stringA JavaScript object with camelCase property namesA class nameAn array of strings

33. Why are inline styles a poor fit for hover effects and media queries?

They are not supported by React at allThe style prop cannot express pseudo-classes or media queriesInline styles are slower to renderThey can only accept numbers

34. What problem does a Fragment solve?

It improves performanceIt lets a component return multiple sibling elements without adding an extra wrapping DOM nodeIt adds animationsIt fetches data

35. When do you need the full <Fragment key={...}> form instead of the <>...</> shorthand?

Never, they are identicalWhen the Fragment needs a key, e.g. inside a listOnly in class componentsWhen styling the Fragment

36. Why are portals commonly used for modals?

They render faster than regular componentsThey let content escape an ancestor’s overflow/z-index constraints while staying part of the React treeThey are required for any pop-up UIThey automatically add animations

React Beginner Practice

Quick Quiz