/
React Fundamentals and Hooks
Save to my account
Sign up
React Fundamentals and Hooks
React Fundamentals and Hooks
Study
1
Question
What is a functional component in React?
Answer
A reusable UI piece defined as a function returning JSX
2
Question
What are props used for in React?
Answer
Passing data from parent to child components
3
Question
What is the declarative programming approach in React?
Answer
Describe UI based on state; React updates DOM efficiently
4
Question
What direction does data flow in React applications?
Answer
Unidirectional from parent to child via props
5
Question
What are the benefits of React’s component-based approach?
Answer
Modularity, reusability, easier testing, scalable collaboration
6
Question
What problem does the Virtual DOM help mitigate?
Answer
Expensive direct DOM manipulations and reflows
7
Question
What is the purpose of npm in the React setup?
Answer
Package manager to install dependencies and manage projects
8
Question
What is the purpose of the useState hook in React?
Answer
To add state to functional components and trigger re-renders when updated.
9
Question
What does the useState hook return?
Answer
An array with the current state value and a setter function.
10
Question
How do you name the setter function conventionally?
Answer
Prefix the state variable name with 'set' (e.g., setCount).
11
Question
What happens when you call a setter from useState?
Answer
React schedules a re-render with the new state value.
12
Question
What is a controlled component in React?
Answer
An input whose value is controlled by React state.
13
Question
What pattern is used to update state from an input event?
Answer
Update the state in the onChange handler and set the input value from state.
14
Question
What does the submitted state boolean represent in the Greeting component example?
Answer
Whether the form has been submitted.
15
Question
What does event.preventDefault() accomplish in a form submission?
Answer
It stops the browser’s default form submission behavior.
16
Question
What is the effect of calling setSubmitted(true) after form submission?
Answer
Marks the form as submitted and can trigger different UI output.
17
Question
Why might a component use multiple useState calls in React?
Answer
To track several independent pieces of state separately.
18
Question
In the Todo item component, how is the completed state stored and updated?
Answer
As isCompleted state; toggled with setIsCompleted on checkbox change.
19
Question
What visual change occurs when a task is completed in the Todo item example?
Answer
Text is struck through and color changes to indicate completion.
20
Question
What principle combines props and state in React components?
Answer
Props configure the component from the outside; state manages internal data.
21
Question
What is the role of the onDelete callback in Todoltem?
Answer
Notifies the parent to remove the task from the list.
22
Question
What does textDecoration: 'line-through' accomplish in inline styles?
Answer
Draws a line through the text to indicate completion.
23
Question
What is the purpose of independent state in a React component, as described in the sample code?
Answer
Allows granular control of each piece of data without affecting others
24
Question
In the TodoList example, what does the deleteTask function do?
Answer
Removes the specified task from the tasks array
25
Question
How does Todoltem determine whether to show a task as completed?
Answer
Uses the isCompleted state to apply line-through style and color changes
26
Question
What prop is passed from TodoList to Todoltem to enable deletion communication?
Answer
onDelete callback
27
Question
What happens when a user submits the form in the TodoList component?
Answer
addTask is called; a new task is added if inputValue is non-empty
28
Question
What React pattern is demonstrated by Todoltem managing its own completed state while TodoList manages the list of tasks?
Answer
Child manages internal state, parent passes data via props and a callback for communication
29
Question
In the ColorPicker example, what is the initial color state set to?
Answer
'#000000' (black)
30
Question
What is the role of predefinedColors in the ColorPicker component?
Answer
Provides a list of selectable color options for the user