Understanding React Hooks

React Hooks changed the way we write React components, making functional components more powerful than ever.

What are Hooks?

Hooks are functions that let you use state and other React features in functional components.

useState Hook

The most basic hook for managing state:

jsx

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button {() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

useEffect Hook

For side effects like data fetching:

jsx

useEffect(() => {
  fetchData();
}, [dependency]);

Custom Hooks

Create your own reusable hooks:

jsx

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

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

  return [value, setValue];
}

Best Practices

Always use hooks at the top level
Only call hooks from React functions
Use ESLint rules for hooks

Conclusion

Hooks make React code cleaner and more reusable. Master them to become a better React developer!