Updated & Optimized UpcomingEvents Component

[nayakOPS]

Feature Update UpcomingEvents Component

This PR improves the UpcomingEvents component by optimizing its performance and enhancing its code readability.

Key Changes

1. Added React.memo:

   • Prevents unnecessary re-renders of the UpcomingEvents component, improving performance.

2. Destructured Properties in map:

   • Simplified code by destructuring title, description, image, and link directly in the events.map() function.

Why These Changes?

• Performance: React.memo ensures the component re-renders only when its props change, which is essential for large-scale applications.
• Code Readability: Direct destructuring improves readability and makes the code easier to maintain.

[nischalshakya787]

LGTM

[bhimrazy]

Hi @nayakOPS,

Could you explain a bit about how this component will re-render?
Perhaps you could provide an example to help understand it better, along with the reason for using React.memo.

Also, there’s another library called react-scan. You could use it to verify and provide a demonstrable example for rerender.
Thanks 😊

[bhimrazy]

@nayakOPS , Any updates ?

[nayakOPS]

Hi @bhimrazy ,
Thank you for your feedback and for pointing out areas for clarification. I really appreciate your insights. Currently, I’m a bit tied up with other tasks, but I’ll get back to this and provide the requested updates as soon as I can.
Thank you for your patience! 😊

[nayakOPS]

Hi @bhimrazy,

Thank you for your patience!
Let me explain the purpose of using React.memo and how it affects re-renders in the UpcomingEvents component.

Why Use React.memo?
React.memo is a higher-order component that prevents unnecessary re-renders of a component when its props haven’t changed. In the case of the UpcomingEvents component:

The component receives no props (it directly uses the upcomingEvents data from the imported file).

However, wrapping it in React.memo ensures that if this component is ever used in a parent component that re-renders frequently, the UpcomingEvents component won’t re-render unless its props change.

Example of Re-renders:
Imagine a scenario where the UpcomingEvents component is used inside a parent component like this:

const ParentComponent = () => {
  const [state, setState] = React.useState(false);

  return (
    <div>
      <button onClick={() => setState(!state)}>Re-render Parent</button>
      <UpcomingEvents />
    </div>
  );
};

Without React.memo, every time the ParentComponent re-renders (e.g., when the button is clicked), the UpcomingEvents component will also re-render, even though its props (none in this case) haven’t changed.

With React.memo, the UpcomingEvents component will skip re-renders unless its props change, improving performance.

Regarding react-scan:
I haven’t used react-scan before.However, if you’d still like me to include the react-scan output or a demo, I’d be happy to do so. Let me know your thoughts! 😊

[bhimrazy]

Thank you for the explanation, @nayakOPS!

I understood the purpose of React.memo, but since the UpcomingEvents component doesn’t receive any props and is not currently used in a client component, it seems unnecessary to wrap it in memo.

If the component is later used in a parent component that re-renders frequently, we can consider adding React.memo at that point to optimize performance. For now, keeping it simple without memo would make the implementation cleaner.

Let’s use memo only when there’s a clear benefit to avoid over-complicating the code.

[bhimrazy]

Suggested change

	const UpcomingEvents = React.memo(() => {
	const UpcomingEvents = () => {

[bhimrazy]

Suggested change

	});
	};