Font size
WorksheetsReact Events, State, useEffect and Routing
Total questions: 19
Worksheet time: 9mins
What is "state" in React?
A built-in method to handle APIs
An object that holds data that may change over time
A function to trigger re-rendering
How do you define state in a functional component using Hooks?
const [state, setState] = React.useContext()
const state = useState()
const [state, setState] = useState()
Which Hook is used to handle state in a functional component?
useState()
useEffect()
useContext()
What happens when setState() is called in a component?
The component is destroyed
The component updates and re-renders
The app reloads
What is the purpose of an event handler in React?
To fetch API data
To manage user interactions
To call back-end functions
Which is the correct way to write an onClick event in JSX?
<button onClick="handleClick()">Click</button>
<button onclick="handleClick()">Click</button>
<button onClick={handleClick}>Click</button>
<button onclick={handleClick()}>Click</button>
What is a common use case for an onChange event in React?
Detecting when a page reloads
Listening to keyboard presses
Submitting a form
Handling form input changes
What is the main purpose of react-router-dom in a React application?
To manage application state
To manage routing and navigation
To handle HTTP requests
Which component is used to define the routing context in react-router-dom v6?
RouterProvider
HashRouter
BrowserRouter
What does the <Route> component do?
Maps a path to a component
Sends a request to an API
Handles form submissions
Which component should wrap your entire app to enable routing?
<Router>
<Switch>
<NavLink>
<BrowserRouter>
How do you create a link in react-router-dom that doesn’t reload the page?
<a href="/home">Home</a>
<Link to="/home">Home</Link>
<navigate to="/home">Home</navigate>
What does the element prop in <Route> do in v6?
Sets the fallback element
Assigns HTML element
Defines the component to render
What is the purpose of the <Outlet /> component in React Router DOM v6?
To render child routes in a layout
To handle form input
To render the current route selected
What is the primary purpose of the useEffect hook in React?
To update state
To perform side effects like data fetching
To Upgrade DOM
What does the second argument of useEffect represent?
The return value of the function
A callback function
An array of dependencies
The component’s props
What happens when the dependency array in useEffect is empty?
The effect runs only once after the first render
The effect runs on unmount
The effect runs every time
The effect never runs
What will happen if you omit the dependency array in useEffect?
It will run on every render
It won’t run at all
It will throw an error
It will run once
What happens when you add an item (like a variable or state) to the dependency array in useEffect?
The effect will run only once
The effect will run every time that item changes
The effect will stop working
