React Quiz

How does React handle lists and keys when rendering multiple elements?

• React automatically generates unique keys for each element in the list

• React uses the index of each element as the default key when none is provided

• React does not require keys when rendering lists of elements

• React relies on the browser's built-in key generation algorithm for efficiency

Which of the following methods can be used to update the state in a parent component by clicking a button present in a child component in React?

• A) Pass the state updater function as a prop to the child component and call it from the child component when the button is clicked.

• Use context to share state between the parent and child components and update the state directly from the child component.

• Use a global state management library like Redux to manage the state and dispatch actions from the child component to update the state in the parent component.

• Call a callback function passed as a prop from the parent component to the child component, triggering a state update in the parent component when the button is clicked

What is the main advantage of using a module bundler like Webpack in a React application?

• It automatically installs all the required dependencies

• It converts modern JavaScript code into a backwards-compatible version

• It bundles and optimizes the application's code for production

• It provides the component-based architecture

What is the primary purpose of useMemo in React?

• To memoize a function

• To manage side effects

• To create a reference to a DOM element

• To optimize performance by memoizing the result of a computation

What are the potential pitfalls when using useMemo and useCallback in a React application?

• Memory leaks

• Overhead of maintaining memoized values and functions

• Unintended side effects

• Increased complexity in debugging

What is the main difference between a Single Page Application (SPA) and a traditional multi-page application?

• SPAs load the entire application on the initial load, while traditional apps load new pages on each navigation

• SPAs use React, while traditional apps use HTML, CSS, and JavaScript

• SPAs are faster than traditional apps

• SPAs cannot handle SEO, while traditional apps can

How do you decide when to use useCallback in a React component?

• When you want to memoize the result of a computation

• When you want to manage side effects

• When you want to memoize a function to avoid unnecessary re-renders

• When you want to create a reference to a DOM element

Which of the following best describes the outcome when a dependancy array is not passed to the useEffect hook in React?

• The effect will not run at all

• The effect will run every time the component renders

• The effect will run once when the component mounts, then again on every subsequent render.

• The effect will run only when the component unmounts.

What command is used to create a new React application named "my-app"?

• npm create-react-app my-app

• npx create-react-app my-app

• react-create-app my-app

• npm install create-react-app my-app

When will the useEffect will run?
const [count, setCount] = useState(0);

const [name, setName] = useState('');

useEffect(() => {

console.log('Effect ran');

}, [count]);

const handleIncrement = () => {

setCount(count + 1) };

const handleNameChange = (e) => {

setName(e.target.value); };

• It will run only when the count state variable changes, but not on the initial render.

• It will run on the initial render and whenever the count state variable changes.

• It will run on the initial render and whenever either the count or name state variables change.

• It will run on the initial render and whenever the component re-renders, regardless of state changes.