When toggling a boolean state value using useState, which approach is correct?

setState(prevState => !prevState);

How do you initiate a state change when using useReducer?

Invoking the provided dispatch function

How can you render a component only when no other routes match?

By placing the without path attribute at the bottom inside a

What value will the useContext hook return if used outside of a corresponding Provider?

The default value passed to React.createContext

In functional components, what can useRef be used for apart from referencing DOM elements?

Storing previous state values without triggering re-renders

When the context value changes, which components will re-render?

Only components that use useContext to consume that context

Can you conditionally apply an effect after a component has rendered?

Yes, using conditional statements inside the useEffect callback

If a value used in the effect does not change between renders, how can you prevent the effect from re-running?

Include the value in the dependency array

In which scenario might you prefer useReducer over useState?

When you need to manage complex state logic with clear action definitions

What is the primary use of the useRef hook in React?

To reference a DOM element directly

What is React primarily used for?

Building user interfaces for web apps

If you want a useEffect to run only when a prop changes, what should you do?

Add the prop to the dependency array

When creating a context using React.createContext, what can you pass as an argument?

A default value for the context

When setState() is called in a component:

It queues changes to the state.

How can you lazily initialize the state for useReducer?

By passing a function as the second argument to useReducer

Can a component consume multiple contexts using the useContext hook?

Yes, by invoking useContext multiple times

What do you pass as an argument to the useContext hook?

The context object you want to access

What is the primary purpose of the useContext hook in React?

To access the context for a component

How is the useState hook imported?

import { useState } from 'react';

studbud

Duplicate of KBA 320

85 termsStudBud Administration4 plays

Imported from external platform

Flashcards85 cardsFPractice quizPHost liveL

Questions 85

Answers

1
When toggling a boolean state value using useState, which approach is correct?
state = !state;
setState(!prevState);
setState(prevState => !prevState);
state(!state);
2
How do you initiate a state change when using useReducer?
Using the useEffect hook
Invoking the provided dispatch function
Calling the reducer function directly
Using the setState function
3
If initializing state is computationally expensive, what can you use to set the initial state?
A callback function
A loop structure
A rate limiter
An external API call
4
How do you update the state when using the useState hook?
state(newValue);
state = newValue;
useState = newValue;
setState(newValue);
5
How can you render a component only when no other routes match?
By placing the <Route> at the top of your routes
By using the default attribute on <Route>
By placing the<Route>without path attribute at the bottom inside a<Switch>
By setting the path attribute to '*'
6
Which component can be used to redirect from one path to another?
<GoTo>
<Redirect>
<Move>
<Change>
7
Which component in React Router is used to create links?
<Nav>
<Anchor>
<Link>
<Href>
8
What value will the useContext hook return if used outside of a corresponding Provider?
The default value passed to React.createContext
null
An empty object ({})
An error will be thrown
9
In functional components, what can useRef be used for apart from referencing DOM elements?
Executing side-effects
Storing previous state values without triggering re-renders
Updating the props of a component
Making AJAX requests
10
What value will the state variable hold if useState() is called without an argument?
null
false
0
undefined
11
Besides passing a ref object to a React element's ref attribute, what else can be passed?
A callback function
A promise
An array
A string
12
When the context value changes, which components will re-render?
All components in the application
Only parent components
Only components that use useContext to consume that context
Only sibling components
13
Can you conditionally apply an effect after a component has rendered?
Yes, but only with conditional rendering
Yes, using conditional statements inside the useEffect callback
Yes, but only inside event handlers
No, it will cause a React error
14
What happens to the component when the state managed by useState is updated?
The component rerenders
The entire page refreshes
Only the children components rerender
The component does not rerender
15
If a value used in the effect does not change between renders, how can you prevent the effect from re-running?
Use the shouldSkip hook
Include the value in the dependency array
Return false from the effect
Omit the value from the dependency array
16
Actions dispatched to a reducer typically have at least which key?
key
type
data
value
17
What type of operations are typically suitable for useEffect and not useState?
Declaring variables
Direct DOM manipulations
React component logic
Storing values
18
Which phase in the React update cycle may be interrupted?
Neither Render nor Commit
Both Render and Commit
Render
Commit
19
What type of object does useRef return?
A callback function
A state object
A mutable object
An immutable object
20
If you want an effect to run on every render, what should you do with the dependency array?
Add a special 'every' keyword
Fill it with all props and state
Exclude it entirely
Leave it empty
21
How do you perform cleanup actions in a useEffect?
Add a finally block
Return a function
Call a cleanup() function
Return a promise
22
If a useEffect is running more often than expected, how can you check which dependency is causing the effect to run?
Any of these methods
Use the React DevTools
Use a linter rule
Log each dependency's value
23
Is it possible to use the useState hook multiple times in a single functional component?
Only up to three times
Only in combination with other hooks
No, only once
Yes, as many times as needed
24
What type of values can be stored using useState?
Only objects
Only strings or numbers
Only arrays
Any type of value
25
Using context extensively can potentially lead to what type of performance issue in React applications?
Slower initial render
Memory leaks
Unnecessary re-renders
Reduced bundle size
26
How are DOM events named in React components?
On_Click
on-click
onClick
onclick
27
What does useRef() without an initial value initialize the current property to?
[]
0
undefined
null
28
In which scenario might you prefer useReducer over useState?
When you have high-frequency updates
When the next state depends on the previous state
When managing a single counter variable
When you need to manage complex state logic with clear action definitions
29
What does JSX stand for?
Java Standard Exchange
JavaScript Extended
Just Simple XML
JavaScript XML
30
Can you use the useEffect hook multiple times in a single component?
only in class components
only with a special configuration
yes
no
31
If you want to pass components or elements as children to another component, which prop would they be accessible through
props.items
props.children
props.elements
props.child
32
What is the primary use of the useRef hook in React?
To fetch data
To reference a DOM element directly
To trigger re-renders
To hold state values
33
What is React primarily used for?
Building mobile apps
Database management
Building user interfaces for web apps
Back-end development
34
If you want a useEffect to run only when a prop changes, what should you do?
Add all state and props to the dependency array
Use the prop directly without the dependency array
Exclude the dependency array
Add the prop to the dependency array
35
In a reducer function, what is the common name for the object you dispatch to produce a new state?
Action
Transition
Change
Mutation
36
When creating a context using React.createContext, what can you pass as an argument?
Only functions
Only strings
A default value for the context
The useContext hook
37
When setState() is called in a component:
It queues changes to the state.
It causes the component to re-render synchronously.
It sends an update to the server.
It immediately updates the component's state.
38
What does the useReducer hook return?
Current state, Previous state
Reducer, Action
State, Reducer
State, Dispatch
39
How can you lazily initialize the state for useReducer?
By passing a function as the second argument to useReducer
By providing a third argument to useReducer
Using the useState hook
Lazy initialization is not possible with useReducer
40
How do you pass an event handler as a prop to a component?
<Component handlerFunction()>
<Component {handlerFunction}>
<Component execute={handlerFunction()}>
<Component handler={handlerFunction}>
41
Can a component consume multiple contexts using the useContext hook?
Only if the contexts are merged
Only within a Context.
No, only one context per component is allowed
Yes, by invoking useContext multiple times
42
How many arguments does the useReducer hook accept in its basic form?
One
Three
Four
Two
43
What do you pass as an argument to the useContext hook?
A default value for the context
The desired state
The current state
The context object you want to access
44
How do you define a dynamic route that matches an ID in React Router?
<Route path="/{id}" />
<Route path="id={}" />
<Route path="/(id)" />
<Route path="/:id" />
45
What is the primary purpose of the useContext hook in React?
To create global state
To access the context for a component
To force a component re-render
To manage component state
46
How is the useState hook imported?
import { useState } from 'react';
import useState from 'react';
const useState = require('react').useState;
import { useState } from 'react-hooks';
47
How do you access the current value of the ref object?
ref.target
ref.value
ref.current
ref()
48
Props in React are similar to:
Functions in JavaScript
Arguments passed to a function
Loops in JavaScript
Variables in JavaScript
49
How do you pass a prop 'title' with the value 'React' to a component <Header />?
<Header prop.title="React" />
<Header title: "React" />
<Header title="React" />
<Header props={title: "React"} />
50
What is used to provide a context value to a tree of components?
Context.Provider
useContext
Context.Consumer
ProvideContext
51
If you want a <Route> to match a path only when it's an exact match, which prop would you use?
specific
exact
strict
only
52
What does React Router primarily help with?
Managing component state
Making API requests
Rendering components based on the navigation state
Styling components
53
Which of the following is NOT a typical use case for useRef?
Triggering a component re-render
Storing the interval ID from setInterval
Directly interacting with DOM elements
Capturing the previous state without re-render
54
In what order are effects executed?
After rendering but before the browser paints the UI
Before rendering
After the browser paints the UI
In parallel with rendering
55
What happens when the value of a useRef changes?
The component re-renders
Nothing; the component does not re-render
A new ref object is created
The old ref object is garbage collected
56
The useState hook returns an array with the first value being the current state and the second value being:
A function to update the state
The initial state
The component props
The previous state
57
Which React Router component is used to define a route matching a particular pattern?
<Router>
<Switch>
<Route>
<Link>
58
What does a functional component return?
A class instance
A React element (JSX)
An HTML element
A promise
59
What is the primary use case for the useReducer hook in React?
Binding event handlers
Making API calls
Memoizing component renders
Managing complex state logic
60
What happens when you nest multiple Context.Provider components of the same context type with different values?
The values are merged
An error is thrown
The app crashes
The closest provider's value is used
61
When you dispatch an action, can the action access the current state directly?
No, actions are strictly isolated from state
Yes, but only if passed in
Yes, it always has access
No, the reducer function determines how they interact
62
What is the signature of a typical reducer function?
(action, state) => newState
(state, action) => newState
(state) => action
(prevState, newState) => action
63
How can you destructure a prop named “title” directly in the functional component's parameter?
const ComponentName = ({ title }) => { return <div>{title}</div>; }
const ComponentName = { title } => { return <div>{props.title}</div>; }
const ComponentName = props.title => { return <div>{title}</div>; }
const ComponentName = (title) => { return <div>{props.title}</div>; }
64
In React, props can be passed from...
Any component to any component, irrespective of their relationship
Sibling to sibling
Child to parent
Parent to child
65
In React Router, how can you best handle rendering routes within routes (like in the case of a dashboard layout)?
This is not possible in React Router
Nested <Link> components
Nested <Route> components
Nested <Router> components
66
Before using useContext, what must you first create?
An effect
A context
A reducer
A ref
67
How can you access the previous state value when updating the state using useState?
state = state + 1;
setState(state + 1);
state = state.previous + 1;
setState(prevState => prevState + 1);
68
Are state updates in React synchronous or asynchronous?
Asynchronous inside event handlers, synchronous otherwise
Always synchronous
Synchronous inside event handlers, asynchronous otherwise
Always asynchronous
69
If no matching action type is found in the reducer, what's a common convention to return?
An error state
null
The current state, unchanged
undefined
70
If you are using an object or an array as state with useState, how should you update it?
It's not possible to use objects or arrays with useState
Modify the state using external libraries
Use a spread or concat method to create a new state and then call setState
Directly modify the existing state and call setState
71
During which phase are the DOM updates and side effects performed?
preparation
Commit
cleanup
render
72
What is the primary purpose of the useEffect hook in React?
To create context
To handle side effects
To reference DOM elements
To manage state
73
What prop does the Context.Provider component use to receive the current context value?
current
state
context
value
74
Which of the following best describes the first argument passed to useReducer?
Reducer function
State updater
Action
Initial state
75
How can you access props in a functional component?
this.props.propName
props.propName
function.props.propName
React.props.propName
76
How is a basic functional component defined in React?
class ComponentName extends React.Component { return <div></div>; }
const ComponentName = class { return <div></div>; }
React.createFunctionalComponent(() => <div></div>);
function ComponentName() { return <div></div>; }
77
To use React Router in a project, which npm package should you install?
react-routes
react-navigation
router-react
react-router-dom
78
In the context of the render cycle, what does a Pure Component do?
It forces a render every time.
It prevents a render if props and state haven't changed.
It skips the commit phase.
It cleans up side effects.
79
How is the useState hook typically used to declare a new state variable?
const [state, setState] = useState(initialValue);
let [state, setState] = useState();
const {state, setState = useState(initialValue)
const state = useState(value);
80
One major advantage of using context in React is to avoid which common issue?
State mutation
Prop drilling
Component nesting
Redundant renders
81
What does the dependency array in useEffect dictate?
The timeout for the effect
How frequently the callback runs
The previous state values
The variables the effect depends on
82
How do you prevent a browser's default action in a React event handler?
event.defaultPrevented()
event.preventDefault()
event.prevent()
return false
83
Which one is a way to return multiple elements from a functional component without wrapping them in a parent element
<><div></div><span></span></>
<React.Array><div></div><span></span></React.Array>
<React.Children><div></div><span></span></React.Children>
<React.Group><div></div><span></span></React.Group>
84
Can you use multiple useReducer hooks in a single functional component?
No, only one useReducer hook is allowed per component
It's discouraged but possible
Only two can be used for performance reasons
Yes, as many as you need
85
Which of the following can trigger a re-render in a React component?
A change in component's state
A new background color applied to the component
Moving the component to another part of the app without any data changes
A change in component's functions

Duplicate of KBA 320 Flashcards | StudBud