Font size
WorksheetsReactJS OVerview Unit 11-18
Total questions: 50
Worksheet time: 45mins
Which of the following is true regarding Babel ? (2 correct answers)
A compiler
A transpiler
A framework
A programming language
What "_____case" does React DOM use for naming attributes and properties?
Camel (camelCase)
Pascal (PascalCase)
Snake (snake_case)
Kebab (kebab-case)
What are the smallest building blocks of React apps
Components
Functions
Elements
JSX
A component name must start with ________.
a lowercase letter
a capital letter
a number
everything
Which component lifecycle method runs after the component output has been rendered to the DOM?
componentMounted()
componentRendered()
componentDidMount()
componentDidRender()
Which component lifecycle method is used to perform the cleanup when the component is removed from the DOM?
componentUnmounted()
componentWillUnmount()
componentDidUnmount()
None of the above
State of a component is often called ___ data?
public
protected
private
local or encapsulated
In order to prevent a component from rendering it should return ___?
undefined
false
null
empty string
Which of the following activities do we perform while declaring useState in React?
Object destructuring
Unpacking object
Array destructuring
Unpacking array
How does React remember which state variable belongs to which useState call?
It makes a lookup table
It remembers the calling order
It traverses the calls again, whenever needed
None of the above
How many calls can we make to useState or useEffect in a single component?
Unlimited, but equal calls for both hooks
Unlimited
Limited
Limited, but equal calls for both hooks
What is passed as an argument in useState() in React?
Initial value
State variable
Function to set state
All can be passed
How many possible arguments can useState() take?
only 1
exactly 2
more than 2
no limit
Which of the following is associated with the execution of useEffect in react?
Synchronous
Asynchronous
Both are correct
It depends
Return function inside useEffect is call _______
Cleanup function
Return function
Final function
None of the above
Which of the following could be an application of return function in useEffect?
To avoid memory leak
To remove unwanted things
To reallocate resources
When should you use the useEffect hook?
When you need to manage component state
When you want to trigger a side effect
When you need to memoize expensive function results
When you need to optimize rendering performance
How does the useEffect hook improve performance?
By reducing the number of component re-renders
By handling asynchronous operations more efficiently
By optimizing the component's memory usage
By providing a clean way to handle side effects
Can the useEffect hook be used to perform data fetching?
Yes, it's a recommended approach for data fetching
No, useEffect is only for managing component state
Yes, but only once in a project
Data fetching should be done outside of useEffect
What happens if you omit the dependency array in the useEffect hook?
The effect will run once after the initial render
The effect will run on every render
The effect will not run at all
The behavior is undefined
What is the purpose of returning a cleanup function in useEffect?
To clean up after the effect has been applied
To cancel the effect before it's finished
To prevent memory leaks caused by the effect
To control the order of effect execution
Can you use async/await inside the callback function of useEffect?
Yes, it's a recommended approach
No, async/await should not be used inside useEffect
It depends on the scope and scale of the project
Async/await is not supported in useEffect
How can you provide a default value to a context using the createContext function in React.js?
By using the defaultValue prop in the Context.Provider
By passing the default value directly to the useContext hook
By setting a default value using the useContextDefault method
By passing a default value to the createContext function
How can you access the context value outside of the render function in a functional component?
Using the this.context syntax
Storing the context value in a global variable
Creating a separate custom hook
Context values can only be accessed within the render function
In the useContext hook, what should be passed as an argument to identify the context to be consumed?
Context value
Context type
Context name
Context object
How can you update the context value dynamically using the useContext hook?
Use the updateContext method
Context values are immutable and cannot be updated
Use the setContext method
By updating the value provided by the context provider
When should you use the useRef hook?
When you need to manage component state
When you want to trigger a side effect
When you need to reference a DOM element
When you need to optimize rendering performance
What problem does the useRef hook solve?
Improving component performance
Managing asynchronous operations
Preventing memory leaks
Accessing and managing DOM elements
When should you avoid using the useRef hook?
When you need to manage component state
When you want to trigger a side effect
When you need to reference a DOM element
When you need to optimize rendering performance
What is the main benefit of using useRef for referencing DOM elements?
It simplifies component logic
It automatically updates the DOM elements
It reduces memory consumption
It allows safe access and manipulation of DOM elements
What problem does the useCallback hook solve?
Improving component performance
Managing asynchronous operations
Avoiding unnecessary re-renders
Preventing memory leaks
How does the useMemo hook improve performance?
By reducing the number of component re-renders
By handling asynchronous operations more efficiently
By optimizing the component's memory usage
By simplifying the component's lifecycle methods
What happens if you omit the dependencies array in the useMemo hook?
The function will always be memoized
The function will never be memoized
The hook will throw an error
The behavior is undefined
How do "action" and "action creator" differ in Redux?
"Action" is an object describing an event, while "action creator" is a function that returns that object.
"Action" is a function, while "action creator" is an object describing an event.
"Action" and "action creator" are synonymous terms.
"Action" and "action creator" are unrelated.
What can Redux Middleware do in the action processing chain?
Only intervene in sending actions to reducers.
Provide a way to handle asynchronous actions and intercept actions before they reach reducers.
Only handle actions after they have been processed by reducers.
Directly handle actions before they are sent to the store.
What should a reducer in Redux always return if no state changes are made?
undefined
null
The current state
{} (empty object)
How can you combine multiple reducers into a single reducer in Redux?
Using combineReducers from the Redux library.
Manually creating a combined reducer without a library.
Using the reduce method on an array of reducers.
Redux does not support combining multiple reducers.
How do you handle asynchronous actions in Redux?
By using middleware like redux-thunk or redux-saga.
By using synchronous action creators with dispatch.
By writing asynchronous logic directly inside reducers.
Redux does not support asynchronous actions.
In the context of Redux, what are "selectors" and how do they enhance performance?
Selectors are functions that compute derived data from the Redux store, and they enhance performance by memoizing the results to avoid recalculating on every render.
Selectors are middleware functions that intercept and modify actions before they reach reducers.
Selectors are methods of the Redux store that directly update the state based on specific conditions.
Selectors are used to dispatch actions based on the current state of the store.
What will the code do?
It will create two props, increment and decrement, that dispatch the corresponding actions.
It will create two props, increment and decrement, that update state directly.
It will create a single prop that dispatches both actions.
It will create two props, but they won't work correctly with Redux.
Given the following reducer, what will the state be after calling the action SET_NAME with the payload { name: 'Alice' }?
{ name: '' }
{ name: 'Alice' }
{ name: 'Alice', age: undefined }
{ name: 'Alice', name: 'Alice' }
What will the state be after dispatching two actions sequentially in the following setup?
{ value: 2}
{ value: 1 }
{ value: 0 }
{ value: -1 }
Given the following Redux setup, what will be the state after dispatching the ADD_ITEM action?
{ items: [] }
{ items: ['item1'] }
{ items: ['item1', 'item1'] }
{ items: 'item1' }
What will be the final state after dispatching the RESET action in the following Redux setup
{ count: 11 }
{ count: 10 }
{ count: 0 }
{ count: undefined }
Fill in the blank:
"export default counterSlice. (a) ; "
Fill in the blank:
"middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat( (a) ) "
What is the result of using useCallback with an empty dependency array?
const memoizedCallback = useCallback(() => { console.log('Callback'); }, []);
The callback will be recreated on every render.
The callback will be recreated only when dependencies change.
The callback will be the same across renders.
The callback will never execute.
What does the createSlice function from Redux Toolkit return?
A reducer function
Action creators and reducers
Middleware
A store
How does useReducer differ from useState?
useReducer is used for complex state logic, while useState is for simple state management.
useReducer manages side effects, while useState handles state.
useReducer requires a class component, while useState does not.
All are correct
What is the main purpose of combineReducers in Redux?
To merge multiple action creators.
To combine multiple reducers into a single reducer function.
To combine multiple stores.
To merge middleware functions.
