Learn the concept
Components
Functional components are JavaScript functions that return JSX and use hooks for state/lifecycle. Class components extend React.Component and use this.state and lifecycle methods. Functional components with hooks are now the recommended approach.
Functional Components:
Class Components:
Why Functional Components Won:
React 19+ Advantages (functional only):
ref as a regular prop — no more forwardRef wrapper neededuse() hook for reading promises and context conditionallyuseActionState, useFormStatus, useOptimistic for formsimport { useState, useEffect } from 'react';
function Counter({ initialCount = 0 }) {
// State hook
const [count, setCount] = useState(initialCount);
// Effect hook (like componentDidMount + componentDidUpdate)
useEffect(() => {
document.title = `Count: ${count}`;
// Cleanup (like componentWillUnmount)
return () => {
document.title = 'React App';
};
}, [count]); // Dependency array
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
}Breaking large apps into independent component-based micro-frontends
Using Storybook to develop and test components in isolation before integration
Sharing component logic between React web and React Native mobile apps
Build a catalog page that showcases reusable Button, Card, and Input components with variants
Migrate a class component with lifecycle methods to a function component with hooks