React Week 22: Mastering useEffect Rules, Closures, Performance Optimization & Starting Redux

#webdev #react #redux #frontend

This week was mainly about understanding React behavior at a deeper level and beginning my journey into Redux state management.

Instead of focusing on building large features, I spent most of my time studying how React works internally, especially around effects, closures, and performance optimization.

These concepts are not always visible in the UI, but they are extremely important for writing predictable and efficient React applications.

Understanding useEffect Rules and Best Practices

One of my main goals this week was to improve my understanding of useEffect.

Many developers (including myself earlier) tend to use useEffect for almost everything. But after studying it more carefully, I realized that effects should be used only when necessary.

I focused on learning the core rules and best practices, such as:

Using useEffect only for side effects
Avoiding derived state inside effects
Understanding the importance of dependency arrays
Cleaning up effects properly when components re-render or unmount

This helped me better understand when useEffect should be used and when it should be avoided.

Understanding Closures Inside useEffect

Another important concept I studied this week was closures inside useEffect.

Closures can sometimes cause unexpected behavior, especially when working with:

intervals
timers
asynchronous logic

If the dependencies are not handled correctly, the effect might capture stale state values, which can lead to bugs.

Understanding this concept helped me see why dependency management in React is so important.

Performance Optimization Challenge

This week I also worked on a performance optimization challenge using a project called Workout Timer.

The goal of this challenge was not just to build the UI but to analyze how React components render and update.

While working on this project, I practiced:

analyzing unnecessary re-renders
understanding how effects influence rendering
structuring components more efficiently
thinking about performance early in development

This challenge helped me think more like a React developer who cares about performance, not just functionality.

Starting My Redux Journey

Another big milestone this week was starting to understand Redux.

At first, Redux felt complex, but I quickly noticed that its core idea is very similar to React’s useReducer hook.

The basic Redux flow includes:

defining an initial state
creating a reducer function
creating a Redux store
dispatching actions
updating state through the reducer

Understanding this structure helped me see how Redux manages global state across an application.

Learning About Redux Store and Action Creators

I also began learning about:

Redux Store – the central place where application state is stored
Action Creator Functions – helper functions that create action objects

These concepts make state management more structured and predictable, especially in larger applications.

Although modern tools like Redux Toolkit simplify Redux development, I focused on understanding the classic Redux flow first.

What I Learned This Week

Week 22 helped me improve my understanding of several important concepts:

useEffect rules and best practices
closures inside React hooks
performance optimization thinking
Redux fundamentals
Redux store and action creators

These topics are more about understanding React deeply rather than just building features.

Moving Forward

Next, I plan to continue exploring:

Redux Toolkit
more performance optimization techniques
improving component architecture

The goal is to gradually build a stronger foundation in React application architecture and state management.

Every week I try to focus not only on building projects but also on understanding the concepts that make React applications scalable and maintainable.

Step by step, the journey continues