Not wrapping inside in React Router v6
React Router v6 introduced a significant change in how routes must be structured, requiring all <Route> components to be wrapped in a <Routes> component. This change often catches developers off….
Tag: React
Trying to use useNavigate() outside
A common mistake in React Router v6+ is trying to use the useNavigate() hook outside the context of a <BrowserRouter> (or similar router component). This error occurs because navigation hooks….
Using useRef to store values but expecting re-renders
A common misconception in React is expecting components to re-render when values stored in useRef change. This misunderstanding can lead to bugs where UI doesn’t update as expected. The Core….
Calling useContext outside of a <Context.Provider>
A common React mistake occurs when trying to use useContext to access a context value that hasn’t been provided by a matching <Context.Provider> in the component tree. The Core Problem….
Using useReducer but forgetting to return a new state in the reducer function
A common mistake when using useReducer in React is forgetting to return a new state object from the reducer function, which can lead to unexpected behavior and rendering issues. The….
Infinite loop in useEffect due to incorrect dependencies
Avoiding Infinite Loops in React’s useEffect One of the most common React pitfalls is creating infinite loops with useEffect due to incorrect dependency management. These loops can crash your application….
Using useState but forgetting to initialize it with a default value
When using React’s useState hook, forgetting to provide an initial value can lead to subtle bugs and unexpected behavior in your components. Here’s what you need to know about proper….
Using hooks inside class components
React Hooks were designed specifically for function components and cannot be used directly inside class components. This is a fundamental constraint of React’s architecture. Here’s what you need to know:….
Not using useCallback when passing event handlers to child components
The Importance of useCallback for Event Handlers in Child Components When passing event handlers to child components in React, failing to use useCallback can lead to performance issues. Here’s what….
Listening to window events without cleaning them up
A particularly insidious type of memory leak occurs when you add event listeners to the window object but fail to remove them when your React component unmounts. Here’s what you….