React Reference - Modern React Development Guide

🪝 React Hooks

Learn about the power of React Hooks and how they revolutionize component state management.

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

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

Hooks let you use state and lifecycle features without writing class components.

🔄 Component Lifecycle

Understanding the React component lifecycle is crucial for building efficient applications.

useEffect(() => {
  // Component did mount
  const timer = setInterval(() => {
    setTime(new Date());
  }, 1000);

  return () => {
    // Component will unmount
    clearInterval(timer);
  };
}, []);

Use useEffect to handle side effects and cleanup in functional components.

🎯 Context API

Share state across your component tree without prop drilling using React Context.

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
      <Main />
    </ThemeContext.Provider>
  );
}

Context provides a way to pass data through the component tree without having to pass props down manually.

⚡ Performance Optimization

Optimize your React applications with memoization and lazy loading techniques.

const MemoizedComponent = memo(({ data }) => {
  return <div>{data.title}</div>;
});

const LazyComponent = lazy(() => 
  import('./ExpensiveComponent')
);

Use React.memo, useMemo, and useCallback to prevent unnecessary re-renders.

🛠️ Custom Hooks

Create reusable logic with custom hooks to keep your components clean and focused.

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  const setStoredValue = useCallback((newValue) => {
    setValue(newValue);
    window.localStorage.setItem(key, JSON.stringify(newValue));
  }, [key]);

  return [value, setStoredValue];
}

Custom hooks enable you to extract component logic into reusable functions.

🎨 Styling Solutions

Explore modern approaches to styling React components with CSS-in-JS and utility frameworks.

// Styled Components
const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

// Tailwind CSS
<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Click me
</button>

Choose from various styling solutions based on your project needs and preferences.