Week 21 was focused on something every serious React developer must eventually face:
Performance.
Not building features.
Not styling UI.
But understanding how React renders, re-renders, and how to control it.
This week I worked with:
React.memouseMemouseCallbackReact.lazy- React DevTools Profiler
And I applied everything inside my WorldWise project, which is now officially complete.
1️⃣ React.memo – Controlling Unnecessary Re-renders
One of the biggest realizations this week was understanding that:
React re-renders more often than you think.
Even when data doesn’t change.
Using React.memo helped me prevent components from re-rendering when their props remained the same.
But I also learned something important:
Memo is not a magic performance button.
It only helps when:
- The component is expensive to render
- Props are stable
- Re-renders are actually happening
Optimization without measurement is just guessing.
2️⃣ useCallback – Stabilizing Function References
I used useCallback inside WorldWise to prevent unnecessary re-renders caused by changing function references.
Before this, I thought functions were harmless.
But every render creates a new function reference — and if that function is passed to a child component, it can trigger re-renders.
Using useCallback made function identity stable.
The key takeaway:
Optimization is about reference stability, not just logic.
3️⃣ useMemo – Avoiding Expensive Recalculations
I practiced useMemo to memoize derived values and prevent unnecessary recalculations.
This is especially useful when:
- Computations are heavy
- Filtering or sorting large datasets
- Derived state depends on other state
But again — I learned not to overuse it.
Unnecessary memoization can add complexity without benefit.
4️⃣ React DevTools Profiler – Measuring Before Optimizing
This was one of the most important tools I explored this week.
The Profiler helped me:
- Visualize component re-renders
- Measure render duration
- Identify expensive components
- Understand render chains
I’m still not a master of the Profiler.
But now I understand that real performance work requires measurement — not assumptions.
5️⃣ React.lazy – Code Splitting for Better Performance
Finally, I implemented React.lazy for route-based code splitting.
Instead of loading the entire application bundle at once, components are loaded only when needed.
This improves:
- Initial load performance
- Bundle size efficiency
- User experience
This was my introduction to performance beyond rendering — optimizing delivery itself.
WorldWise – Project Completed ✅
This week also marks the completion of the WorldWise project.
And honestly — I really love this project.
It includes:
- Advanced Context API
- useReducer architecture
- Authentication logic
- API interaction
- Routing
- Performance optimization
- Code splitting
This project feels like a real application.
Not just practice.
Finishing it while understanding performance makes it even more satisfying.
WorldWise Github Readme link
What I Learned in Week 21
- React rendering behavior matters more than syntax
- Memoization should be used strategically
- Functions can trigger re-renders
- Measurement is essential
- Code splitting improves real-world performance
- Optimization is about architecture thinking
This week felt like shifting from:
“Building React apps”
to
“Understanding how React apps behave internally.”
Next phase:
Deeper architecture thinking and advanced patterns.
The journey continues.
Top comments (0)