All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8664 bites
Page 29
Explain props in React and how parent components pass data to children
Define props as the single object argument; show destructuring; stress immutability and downward flow; note defaults.
JSX: Putting HTML Inside Your JavaScript Components
JSX is a syntax extension that lets you write HTML-like markup directly inside your JavaScript files, keeping UI logic and structure together. It's the standard way to define a React component's output. The footgun is that JSX is stricter than HTML.
What are the two main ways to define a component in React?
Tests fluency in function and class syntax. Outline: show a function returning an h1; show a class with render() returning an h1; note functions are the React 19 default. Red flag: offering arrow vs function declaration as the two ways, or omitting render().
React Props: Arguments for Your Components
Think of props as arguments for your UI components, letting you pass data from a parent down to a child. You use them to customize a component's appearance or behavior, like passing a user object to a ProfileCard.
What is the purpose of React's key prop and index key risks?
This tests React reconciliation. Keys give stable identity to match components across renders and preserve state. Indices break on reorder or delete, causing state bugs. A red flag: saying keys are only for performance or indices are harmless.
React Fragments: Group Elements Without a Wrapper
React Fragments let you group multiple elements without adding an extra <div> to the DOM. Use them when a component needs to return adjacent elements, like table cells (<td>).
Describe two patterns for conditional rendering in JSX
First, early return with if/else for branches; second, ternary or logical AND inside JSX for inline toggles.
useState: Giving Components Memory
useState gives a component its own memory, letting it track information that changes over time. It's used for everything from handling form input to toggling UI. The biggest footgun: state updates are asynchronous and only apply on the next render.
What is a React Fragment and why use it over a div?
This tests JSX semantics and DOM hygiene. A strong answer says Fragments group children without wrapper nodes, preventing extra DOM and invalid HTML like divs in tables. A red flag is citing performance without mentioning DOM structure or semantics.
React Events: Pass, Don't Call
React handles user actions with event handler functions passed as props, like onClick={handleClick}. This is how you make buttons or forms interactive. The key mistake is calling the function (onClick={doIt()}), which runs on render, not on click.
Explain prop drilling and why it's a problem
Tests coupling in deep React trees. Good answers define prop drilling as forwarding props through unused intermediaries, cite coupling and refactor pain, and name Context or composition as fixes. Red flag: calling props bad or jumping to Redux without Context.
Conditional Rendering: Show UI Based on State
React uses plain JavaScript to decide what UI to show, which is essential for displaying loading states, errors, or user-specific content. The footgun: count && <Component /> will render a "0" if count is 0, not nothing.
Write the React.createElement() equivalent for this JSX
Tests JSX-to-JS compilation mechanics. Answer: createElement('a', {href: '/home', className: 'link'}, 'Go Home'). Children must be the third argument, not inside props. Red flag: nesting children in props or using an unquoted tag variable.
Lists and Keys in React
React turns arrays into UI with map, yet each child needs a unique key prop or you get console warnings. Filter first, then map. The footgun: forgetting keys or failing to include stable unique IDs in your source data.
How does React use keys in reconciliation? When do keys cause bugs?
Tests reconciliation identity semantics. Answer: keys give scoped identity for O(n) diffing; stable keys preserve state, but indices during reordering make React reuse DOM nodes wrongly, polluting state. Red flag: saying keys are 'just for performance'.
useEffect: Syncing React with the Outside World
useEffect synchronizes your component with systems outside React's control, acting as a bridge to the browser or network. It's for data fetching or subscriptions.
Can you pass a React component as a prop? Explain Render Props.
Tests React composition. Yes, functions and JSX are valid prop values. Strong answers explain inversion of control, contrast with children, and cite dynamic layouts. Red flag: conflating render props with HOCs or saying props only accept primitives.
Thinking in React: Decomposing UIs into Components
Think of UIs not as one big page, but as a tree of reusable components. Start by breaking a design mockup into a hierarchy of pieces. The footgun is creating 'god components' that do too much; each component should have a single responsibility.
How do you use useState to track user input?
Initialize with useState at top level, bind input value to state, and update via onChange using setter.
Explain useEffect dependency array behavior for [], [deps], and omitted
It tests reactive dependency tracking. Omitting re-runs every render; [] runs on mount with cleanup on unmount; [deps] re-runs when Object.is detects change. Red flag: claiming [] means 'run once' without mentioning cleanup or stale values.