How a wrong Hook can DDoS you - wfh edition

Thanks for reading! I'm writing about my remote work journey thanks to covid-19 forced me to 😂 I'm writing now almost a month now (Day 31/32)

First of all, many of the topics from past weeks are finished 🎉

This means I can get back to coding. Refactoring, Frontend Architecture and other stuff are waiting for me to be tackled.

This week is the usual end of sprint ceremonies. We had our own Sprint Review and had to share the incident. As mentioned in the previous post some legacy code resulted in a DDoS like HTTP Call overload to one endpoint.

This week, my curiosity caught me and I asked my co-worker to explain me what exactly happened. During our session, we discovered that besides some wrong decision on the API Design, the root cause was a small change in our React Code.

So here is the learning:

** Be careful when using React Hooks with dependencies **

What happened?

The problem was that in one of our Provider Components, we had a useEffect-Hook with multiple dependencies. As my colleague added another one, not realizing that he was putting an Object there and not a primitive data. The outcome 💥

This is how the code simplified looks like:

<AnotherProviderComponent>
  {(filters) => {
    return (
     <ProviderComponent filters experimentData={expData}>
      {(data) => {
        return (<ComponentA/>);
      }}
    </ProviderComponent>);
</AnotherProviderComponent>

What happens here is that from another fetch Call we receive the variant in which the customer is (control or test) and load data and transform it differently based on the variant. So our useEffect looks like this:

    useEffect(
      () => {
        if (!isSomething) {
          getFancyData(
            requestId,
            experimentData
          );
        }
      },
      [
        requestId,
        experimentData // this is an object
      ]
    );

The problem that happened is that React is only doing shallow comparison of such dependencies. If we provide a complex Object here, we will only provider a reference.
With each re-rendering a new reference will be passed (from my understanding) and therefore useEffect is triggered every time something triggers a new render. In our case, the issue was one specific user calling us 10+ times and asking for thousand of items with detailed data.

The fix of it is than simple:

    useEffect(
      () => {
        if (!isSomething) {
          getFancyData(
            requestId,
            experimentData
          );
        }
      },
      [
        requestId,
        experimentData.variant // now we have only a string
      ]
    );

Once we paired and went through the code, the issue was quickly clear to me but for someone who is new to react, this is can happen easily. I think my colleague (new to React) will never forget this 😂

Personal

Ramadan continues and I don't experience downsides. Working from home, not commuting, no stress early in the morning to catch the train.

More and more, I start realizing how much value to my personal life working from home has.

Once we are back to normal, I'll ask to split my time 2-3 days office, 2-3 days remote. I miss my colleagues, our coffee breaks and lunch time but due to this whole Covid-19 situation, I strongly experience the value.

As a side note, my wife is cooking amazing stuff always due to Ramadan 😋
Downside, since last week our kids start to eat almost nothing. Either variations of noodles or variations of bread 🍞 with something. As a parent, somehow it stresses 😅

Take care!

Cheers,

Ferit