Week 7: React hooks and more!

This week was very light. I did not cover anything that was too new or too hard because I needed a break and also wanted to stay in touch! So let's get right into it.

Topics Covered✅

• React returns- the need to return just one parent component
• Re-Renders and minimising them
• Keys in React
• Wrapper components and children
• Hooks
• React.memo

Let's get into them in detail.

1. React Returns

If you notice that when we try to return sibling components out of a React component, React screams a huge NO. This is because React components must return a single root element. Returning multiple sibling elements isn’t allowed because each component needs one clear root in the virtual DOM tree. This structure enables React’s reconciliation process to work efficiently.

2. Re-Renders and minimising them

A re-render in React happens when a component’s output (its JSX) is recalculated, and React determines whether the DOM needs to be updated or not. Unnecessary or frequent re-renders can impact performance if not managed properly, thus, we need to minimise them.

If a parent component re-renders then all its child components re-render along with it. One way to optimise re-renders is to push down state into the lowest common ancestor of the nodes(or components) which need the state. We can also use something called React.memo which we will cover later in this blog.

Realistically, we would do this by pushing all state outside our core logic and using a state-management tool like Recoil(archived), RTK(Redux Toolkit) or something light like Jotai or Zustand.

3. Keys in React

Whenever we render something in react which is a list of items like we did in our last blog.

export function Todos({todos , setTodos}){
    return <div>
        {todos.map((todo)=>{
            return <div key={todo.id}>
               <h1>{todo.title}</h1>
               <h1>{todo.description}</h1>
               {todo.completed?<span>Completed</span>:<button onClick={()=>{
                handleCompleted(todo._id,todos ,setTodos);
               }}>Mark as done</button>}
                </div>
        })}
    </div>
}

Here, React gives a soft warning when in StrictMode which says -
"Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of TodoList. See fb.me/react-warning-keys for more information."

What this means is that React needs some sort of a key to recognise which item in the list is being manipulated, deleted, moved around or anything of the sorts.

We can do this by adding a key prop to each todo as follows

return <div key={todo._id}> // parent div

4. Wrapper Components and children

Wrapper components come in handy when we want uniformity across components written by different people working on a project. In such cases, one person can define a wrapper component that handles common structure, styling, or logic. Other developers can then pass their component content as children to this wrapper.

An example of this is as follows-

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Usage
<Card>
  <h2>Title</h2>
  <p>This is inside the card!</p>
</Card>

5. React.memo

React.memo is a higher-order component that helps optimize performance by preventing unnecessary re-renders of functional components.

When you wrap a component with React.memo, React will only re-render it if its props change. If the props remain the same between renders, React skips rendering that component and reuses the previous result.

const TodoItem = React.memo(function TodoItem({ title, description }) {
  console.log("Rendered:", title);
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
});

If the parent component re-renders but the props (title, description) for a particular TodoItem stay the same, that TodoItem won’t re-render and this saves computation time.

This is especially useful when you have large lists or expensive UI components that don’t need to update unless their data actually changes. But again this will be handled even better when we use a state-management library.

6. Hooks

While we did use some hooks like useState and useEffect in last week's project, this was more of an official definition. Hooks are functions that allow us to hook into react state and lifecycle features from functional components. And while there are a lot of hooks, only a handful are used in most code bases.

Wrapping up🔚

While this week was more theoretical and very light, it does set up some paths that will be very interesting in the upcoming weeks. Especially the state-management part is quite interesting. Some very intriguing stuff coming in the next weeks. If you have any questions or feedback, make sure to comment and let me know!

I'll be back next week with more. Until then, stay consistent!