React.js: Complete Course

React Hooks In Depth/Assessment

Practice & Assessment

Test your understanding of React Hooks In Depth

Multiple Choice Questions

Which useEffect signature runs only once when the component mounts?

When does changing a ref value (ref.current = x) cause a re-render?

What does the cleanup function returned from useEffect do?

What is the main difference between useMemo and useCallback?

Which naming rule is required for a custom React hook?

Coding Challenges

useFetch Custom Hook

Build a custom useFetch(url) hook. It should return { data, loading, error }. Use useEffect to fetch from the URL when the component mounts. Set loading to true at start, false when done. Catch fetch errors and store them in error state. Test it with a component that fetches from https://jsonplaceholder.typicode.com/users and renders a list of user names. Handle all three states: loading spinner, error message, and data list. No external libraries. Estimated time: 25 minutes.

Medium

Mini Project

GitHub User Profile Finder

Build a GitHub user search app. Input: username text field (controlled). On submit, fetch from https://api.github.com/users/{username} using a useFetch hook with useEffect. Display avatar, name, bio, followers, and public repos. Show loading and error states. Use useRef to focus the input on mount. Use useMemo to compute a formatted stats summary string. Use useCallback for the submit handler. Persist the last searched username to localStorage with a custom useLocalStorage hook.

Medium