Navigate
Search topics, hooks, and fundamentals
Class components made this a constant headache. Hooks and arrow functions eliminated the problem entirely — here's how and why.
In class components, event handlers are detached methods — passed as callbacks, they lose their this binding. Every developer has hit this bug at least once:
this binding problem and its fixesFunction components with hooks don't use this at all. State lives in closures, and arrow functions just work:
this needed — hooks + arrow functions just workthis anywhere!The same component — class vs hooks. Notice how much this disappears:
class SearchBar extends React.Component {
state = { query: "" };
// Must bind or use arrow — otherwise 'this' is lost
handleChange = (e) => {
this.setState({ query: e.target.value });
};
handleSubmit = (e) => {
e.preventDefault();
this.props.onSearch(this.state.query);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input value={this.state.query} onChange={this.handleChange} />
</form>
);
}
}function SearchBar({ onSearch }) {
const [query, setQuery] = useState("");
// Arrow function — no this needed
const handleSubmit = (e) => {
e.preventDefault();
onSearch(query);
};
return (
<form onSubmit={handleSubmit}>
<input value={query} onChange={(e) => setQuery(e.target.value)} />
</form>
);
}In modern React, arrow functions and closures handle everything this used to do:
function TodoList() {
const [todos, setTodos] = useState([]);
// Arrow functions capture state via closures
const addTodo = (text) => {
setTodos((prev) => [...prev, { id: Date.now(), text }]);
};
// Inline arrows are fine for simple handlers
const removeTodo = (id) => {
setTodos((prev) => prev.filter((t) => t.id !== id));
};
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>
{todo.text}
<button onClick={() => removeTodo(todo.id)}>x</button>
</li>
))}
</ul>
);
}this binding for every handlerbind were the two main fixesthis