Mutating props inside a child component
Mutating props inside a child component in React is a common mistake that can lead to unpredictable behavior, bugs, and issues with React’s unidirectional data flow. Props are meant to….
Tag: react hooks
Setting state inside render() leading to infinite loop
Avoiding Infinite Loops from State Updates in Render A critical React mistake is calling state update functions (like setState or state setters from useState) inside the render() method or function….
Modifying state directly instead of using setState()
Proper State Management in React Components A critical React anti-pattern is modifying state directly rather than using the proper state update methods. Here’s how to handle state correctly in both….
Using history.push() in React Router v6 instead of useNavigate()
Using history.push() in React Router v6 In React Router v6, the traditional history.push() approach from v4/v5 has been replaced with the useNavigate() hook. Attempting to use the old history API….
Trying to use useNavigate() outside
Using useNavigate() Outside <BrowserRouter> A common React Router error occurs when trying to use the useNavigate() hook in components that aren’t wrapped in a <BrowserRouter> (or similar router component). This….
Using useReducer but forgetting to return a new state in the reducer function
Forgetting to Return New State in useReducer A common mistake when using useReducer is mutating the existing state or forgetting to return a new state object from the reducer function,….
Accessing state immediately after setState() before it updates
A common React pitfall is trying to access an updated state value immediately after calling setState or the state setter from useState. This doesn’t work because state updates are asynchronous….
Using useState but forgetting to initialize it with a default value
Forgetting to Initialize useState with a Default Value A common React mistake is declaring state with useState but forgetting to provide an initial value, which can lead to undefined errors….
Using hooks inside class components
A fundamental limitation of React is that hooks cannot be used inside class components. This is a deliberate design choice by the React team, as hooks were created specifically for….
Forgetting to remove event listeners on unmount
Forgetting to Remove Event Listeners on Unmount in React A common memory leak issue in React occurs when event listeners aren’t properly cleaned up when components unmount. This can lead….