What is the difference between functional and class components?

Question

Accepted Answer

React supports two component styles. Modern React strongly prefers functional components with hooks ; class components survive in legacy code. Functional components — plain JavaScript functions that return JSX. State and lifecycle handled with hooks ( useState , useEffect ). Less boilerplate, easier composition, smaller bundle. Class components — ES6 classes extending React.Component with render() and lifecycle methods ( componentDidMount , componentDidUpdate , componentWillUnmount ). Use this.state and this.setState . Hooks unified the model — functional components can do everything class components could, plus easier reuse via custom hooks. this binding gone — no more this.method = this.method.bind(this) headaches. Code reuse — custom hooks beat HOCs and render props for sharing stateful logic. Performance — equivalent in practice; functional components are slightly easier for the compiler to optimize. New code — always functional + hooks. Class components only for maintaining legacy. Always recommend functional components for new code. Know why: simpler syntax, hooks for logic reuse, closure-based prop capture. Mention that class components are still valid but no longer recommended by the React team.