17:T4c8,import { useState, useEffect } from 'react'; // 1. A Custom Hook for LocalStorage function useLocalStorage(key, initialValue) { // Get initial value from storage or use provided initialValue const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { console.error(error); return initialValue; } }); // Return a wrapped version of useState's setter function that // persists the new value to localStorage. const setValue = (value) => { try { // Allow value to be a function so we have same API as useState const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); window.localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { console.error(error); } }; return [storedValue, setValue]; } // 2. Usage in a component function App() { const [name, setName] = useLocalStorage('name', 'Stranger'); return ( setName(e.target.value)} className="border p-2" /> ); }18:T4ad,import { useState, useTransition, useDeferredValue, useId } from 'react'; function SearchResults({ query }) { // 1. Defer the heavy list rendering const deferredQuery = useDeferredValue(query); // Imagine this is a heavy calculation based on deferredQuery const items = Array.from({ length: 5000 }, (_, i) => `Result ${i} for ${deferredQuery}`); return (

{item}

); } function App() { const [query, setQuery] = useState(''); const [isPending, startTransition] = useTransition(); const id = useId(); // 2. Stable ID for accessibility const handleChange = (e) => { // 3. Keep the input feeling snappy! const value = e.target.value; setQuery(value); }; return (

Search: {isPending &&

Loading new results...

}

); }

Phase 13: Custom Hooks & Logic

0 of 2 topics completed

Building Custom Hooks

useId, useTransition & useDeferredValue

🎤 Mock Interview