Skip to content
šŸ° Svetlana Zaiats
Blog

Blog

When you need re-render, but it doesn't happen...

I already have had this issue and was surprised by this behaviour, but I forgot this ā€” and wasted 2 hours on debugging. I suspected componentā€™s library, checked contexts, and tried to find problems in composition.

So, what happened? In our App.tsx:

<Router history={history}>
    <UuiContext.Provider value={services}>
        <Header />
        <Routes />
        <Footer />
    </UuiContext.Provider>
</Router>

In Header.tsx ā€” navigation:

// it's component from library, responsible for highlighting active menu item
// use uuiContext from UuiContext.Provider and check is link active using history
<MainMenu>
    <MainMenuButton caption='Home' link={{pathname: '/' } />
    <MainMenuButton caption='Dashboard' link={{pathname: '/dashboard' } />
</MainMenu>

And it worksā€¦ almost. When you click on buttons in MainMenu url is updated, content is re-rendered. But there is no highlighting for active menu item in MainMenu.

Started with MainMenu.tsx: add breakpoint in function defining is link active. But on button clicks and changing url this function is not called. And component is not re-rendered.

Add console.log(ā€˜renderā€™) in Header.tsx. So, it is also not re-rendered. Despite updating the history object, and seeing those updates reflected in uuiContext.uuiRouter.history, nothing was triggering a re-render. Why donā€™t children of UuiContext.Provider update?

At this point, I went down a rabbit hole: tried to debug in contexts, because I thought that I have several instances and something weird happens. Found nothing, of course.

But after all this debugging, idea occurred to me: content is re-rendered because of changing actual Route, what if I put Header in corresponded pages? It worked, but in this case Header unmounted and mounted each time route changes. Itā€™s not good user experience.

And then finally I asked right thing: how React and React Router define, what should be re-rendered? Results of answering on this question:

  • we update history
  • history object is stable reference, so you cannot track changes with useEffect and history.location dependency
  • but useLocation and useParams watch changes location, and when we use them ā€” our component re-renders after changes

So I just added to Header.tsx:

useLocation();


//...same code

The most annoying thing about that I already have solved problem like this, but remembered about it only when I found solution again. Writing it down this time so Iā€™ll remember šŸ¤Ŗ

The big re-renders myth

Have you ever heard that writing code like this:

    <Component levels={[1, 2, 3]} />

is bad practice because the levels array is recreated in JSX every time, causing unnecessary re-renders of Component? And that you should use useMemo (like const levels = useMemo(() => [1, 2, 3], [])) or declare it outside the component?

Iā€™ve heard this advice many times. And I followed it.

Even when I encountered cases where passing a ref object as a prop and then updating the ref didnā€™t trigger a re-render, I didnā€™t question it. I just hadnā€™t connected the dots ā€” if a component always re-renders when its props change, then it should work the same way with ref, right?

Now, while reading Advanced React by Nadia Makarevich, I came across one of the most common misconceptions in React:

The big re-renders myth: Component re-renders when its props change.

React updates when a state update is triggered. In that case, it will re-render all nested components, regardless of whether their props have changed.

In the context of re-renders, whether props have changed or not on a component matters only in one case: if the said component is wrapped in the React.memo higher-order component.

Check this out with code: https://codesandbox.io/p/sandbox/props-rerender-dcq97c.

Thatā€™s it! We need to shift our thinking paradigm ā€” from focusing on prop changes to analyzing state updates.

P.S. For constant arrays/objects, I personally prefer defining them in a separate constants.ts file. But thatā€™s a matter of taste, not re-renders.

Do you like to solve puzzles on the interview?

I like solving problems, especially if it is not about losing context or something about classes, and more about logic and data structure. In general, I almost always excited about live-coding, especially when there is interesting problem.

Thatā€™s why when I saw announcement of a lecture about mathematical problems from IT-interviews with math teacher Boris Trushin (famous for his [YouTube channel where he explains math in a very understandable way] (https://www.youtube.com/@trushinbv)) I decided to attend it.

It was interesting, we discussed 7 problems (a couple of them were not from interviews, but thatā€™s okay). I noted what could help me find solutions to similar problems in the future ;)

Blue-eyed islanders

You can find puzzle here.

Approach

Try to solve for easiest case when there is only 1 person with blue eyes. Then with 2 blue-eyed islanders.

Note, what moved all this guys to solve the riddle about eye color (common knowledge about 1 person with a blue eyes)

2 eggs and 100 floors

Suppose that we wish to know which stories in a 100-storey building are safe to drop eggs from, and which will cause the eggs to break on landing. What strategy should be used to drop eggs such that a total number of drops in the worst case is minimized and we find the required floor

  • An egg that survives a fall can be used again.
  • A broken egg must be discarded.
  • The effect of a fall is the same for all eggs.
  • If an egg breaks when dropped, then it would break if dropped from a higher floor.
  • If an egg survives a fall then it would survive a shorter fall.
Approach

When one egg is broken, we need to iterate floors 1 by 1 with second. We can try to find equal range that will be okay.

But with equal ranges (check n, after than 2n, then 3n) it means for second egg the number of tests does not decrease (it always remains n - 1). It should be optimized.

Try to imagine ideal case: in last attempt we need to test only 1 floor. Use it as a starting point and try to figure out how to reach it.

Circular train

You find yourself in a train made up of some unknown number of connected train cars that join to form a circle. Itā€™s the ouroboros of transportation. Donā€™t think too hard about its practical uses.

From the car youā€™re in, you can walk to a car on either side ā€” and because the train is a circle, if you walk far enough eventually youā€™ll wind up back where you started. Each car has a single light that you can turn on and off. Each light in the train is initially set on or off at random.

What is the most efficient method for figuring out how many cars are in the train?

Approach

Explanation in Russion, and again we start with the simpliest case - 1 car, and then try to solve it for 2, 3ā€¦ cars. We need to find out what might serve as a marker of visited car.

Light and 100 prisoners

100 prisoners are sentenced to life in prison in solitary confinement. Upon arrival at the prison, the warden proposes a deal to keep them entertained, certain that the prisoners are too dim-witted and impatient to accomplish it.

The warden has a large bowl containing the cell numbers of all the prisoners. Each day he randomly chooses one cell from the bowl, the corresponding prisoner is taken to the interrogation room, and the cell number is returned to the bowl.

While in the interrogation room, the prisoner will not be allowed to touch anything except the light switch, which the prisoner may choose to turn on or off.

The prisoner may make the assertion that all 100 prisoners have been in the room. If the prisonerā€™s assertion is correct, all prisoners will be released. If the prisoner is incorrect, the game is over and their chance to be freed is gone.

The prisoners are given one meeting to discuss a strategy before their communication is completely severed. What strategy should they adopt in order to ensure, with 100% certainty, that one of them will guess correctly and all be freed?

The initial state of the light is OFF when the first prisoner enters the room.

Approach

Explanation in Russion, you should think about 2 things:

  • we need person who will be responsible for counting (counter)
  • how to ensure that every prisoner is counted only once

Does memory tricks you?

Do you often run into memory leak problems? I donā€™t, but this topic is fascinating to me. Every time I try to dig into problems with memory (sometimes out of pure curiosity), I find these issues very hard to debug and quite stimulating for a developerā€™s brain.

Iā€™m not an expert in memory leaks, so I started gathering useful materials and examples.

Check out Memory Leaks in the guide section ā€” itā€™s a curated collection of links about how garbage collection (GC) works, how to use DevTools efficiently, and in the future, I plan to add some practical advice.

0 days without mistake with SVG background

We have a background SVG at the top of our website: it is SVG image on top, but the main part is just a gray background.

We use the following css for that:

.container {
    background-image: url(path/to/our.svg);
    background-repeat: no-repeat;
    background-size: 100% 144px;
}

It works fine, but holidays are coming and our designer suggested to use a more festive background (and of course add little snow, but there was no problem with snow). Additionally designer requested not to stretch holiday image, so I came up with the following css

.container {
    background-image: url(path/to/holiday.svg);
    background: no-repeat;
    background-size: auto 144px;
    background-position: left top;
}

It went to testing, then to production, and a couple of days after I have message from colleague: hey, could we do something with holiday background on wide screens? It was a disaster: on wide screens (more than 2500px) our background ends on 2000px and the rest is left as an empty gray space!

Fix is really simple:

.container {
    background-image: url(path/to/holiday.svg);
    background: repeat-x;
    background-size: auto 144px;
    background-position: left top;
}

Just note: 100% or repeat.