React Native Hooks: useEffect, useState u0026 Custom Hooks Quiz Quiz

Explore the fundamentals of React Native hooks, including useState, useEffect, and custom hooks, with practical scenarios and clear explanations. This quiz enhances your understanding of state management, side effects, and reusable logic within React Native functional components.

1. Initializing State with useState

   Which value is set as the initial state when using useState like this: const [counter, setCounter] = useState(5)?

   1. undefined
   2. 5
   3. counter
   4. 0

   Explanation: Setting useState(5) initializes the state variable counter with the value 5. The number 0 would only be the default if 0 was passed instead. 'undefined' appears if you provide no initial value, but here 5 is supplied. 'counter' is simply the variable name and not the value.

2. Effect Triggering with useEffect

   Given useEffect(() =u003E { /* logic */ }, [count]), when does the effect run?

   1. On every render
   2. When the count value changes
   3. Never
   4. Only once after the first render

   Explanation: The effect runs whenever the value of count changes because it is listed in the dependency array. It does not run on every render unless the dependency array is omitted. Running only once would use an empty array. It will always run when the dependency matches change, so 'Never' is incorrect.

3. Updating State with setState

   After const [text, setText] = useState('Hello'), what does setText('World') do?

   1. Does nothing
   2. Removes text value
   3. Changes text to 'text'
   4. Changes text to 'World'

   Explanation: Calling setText('World') updates the text state to 'World'. It does not remove the value, or set it to the string 'text', and it indeed changes the state rather than having no effect.

4. Dependency Array Purpose

   Why is the dependency array important in useEffect?

   1. It sets the initial state value
   2. It specifies when the effect should run
   3. It stores all state values
   4. It prevents component mounting

   Explanation: The dependency array tells useEffect when to execute the effect by tracking changes in its listed values. It does not store all state, set initial state, or block component mounting. The other options do not represent the purpose of the dependency array.

5. Custom Hook Naming Convention

   What must a custom hook's name start with to be recognized as a hook?

   1. set
   2. get
   3. hook
   4. use

   Explanation: Custom hooks must start with 'use' to be identified properly as hooks in React conventions. Options like 'get' and 'set' are standard function prefixes but not for hooks. 'hook' is not a recognized prefix for custom hooks.

6. Multiple useEffect Hooks

   Is it allowed to use multiple useEffect hooks in a single functional component?

   1. Only if they run the same logic
   2. Yes, as many as needed
   3. No, only one allowed
   4. Two at most

   Explanation: You can use multiple useEffect hooks in one component, each handling different logic. Limiting to one or two is incorrect, and they do not need to run the same code. This allows clear separation of concerns within a component.

7. State Updates and Rending

   What happens in a component after calling setState from useState?

   1. Only state updates, no re-render
   2. Previous state cannot be used
   3. All components re-render
   4. The component re-renders with updated state

   Explanation: Calling setState with useState causes the component to re-render using the new state value. It does not trigger a re-render for all components, only those affected. State is updated and previous state can still be accessed via the setter function if needed.

8. Returning Values from Custom Hooks

   When creating a custom hook that manages user data, what is the usual return value?

   1. A class component instance
   2. State and helper functions
   3. A new component
   4. A hook component

   Explanation: Custom hooks generally return state values along with functions to update or interact with that state. They do not return new components or class component instances. The term 'hook component' is misleading and not a valid return.

9. Empty Dependency Array

   What happens if useEffect is given an empty dependency array?

   1. Effect runs when any state changes
   2. Effect never runs
   3. Effect runs only once after the component mounts
   4. Effect runs after every render

   Explanation: An empty dependency array causes useEffect to run only once after the initial component render. If you want the effect to run every time, omit the array. It does not prevent the effect from ever running or trigger it on any state change.

10. Using useState in Class Components

    Can useState be used directly within class components?

    1. No, it's only for functional components
    2. Yes, but with special syntax
    3. Yes, for all component types
    4. Yes, by importing it

    Explanation: useState is designed for functional components and cannot be used in class components. Importing it, using special syntax, or applying it to all types are not valid approaches for class components, which use their own state management methods.