React Custom Hooks

Custom hooks let you reuse logic across components.

Creating Custom Hook

Custom hooks start with "use":

```javascript function useCounter(initialValue = 0) { const [count, setCount] = useState(initialValue);

const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1); const reset = () => setCount(initialValue);

return { count, increment, decrement, reset }; } ```

Using Custom Hook

```javascript function App() { const { count, increment, decrement, reset } = useCounter(0);

return ( <div> <p>Count: {count}</p> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={reset}>Reset</button> </div> ); } ```

useFetch Hook

```javascript function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true);

useEffect(() => { fetch(url) .then(res => res.json()) .then(data => { setData(data); setLoading(false); }); }, [url]);

return { data, loading }; } ```

Using it:

```javascript function Users() { const { data, loading } = useFetch('/api/users');

if (loading) return <p>Loading...</p>; return <div>{data.map(user => <p>{user.name}</p>)}</div>; } ```

useLocalStorage Hook

```javascript function useLocalStorage(key, initialValue) { const [value, setValue] = useState(() => { const saved = localStorage.getItem(key); return saved || initialValue; });

useEffect(() => { localStorage.setItem(key, value); }, [key, value]);

return [value, setValue]; } ```

Remember

- Hook names start with "use" - Can use other hooks inside - Reuse logic easily - Keep them simple

> Next: Learn React Router!