loading...
Cover image for How a wrong Hook can DDoS you - wfh edition

How a wrong Hook can DDoS you - wfh edition

fokusman profile image Ferit πŸŒŸπŸ•Œ ・2 min read

working from home (27 Part Series)

1) Starting remote work journey - Day 0 2) Starting the journey of remote work - Day 1 3 ... 25 3) Starting the journey of remote work - Day 2 4) Remote work journey - Day 3 5) Remote work journey - Day 4 6) Remote work journey - Day 5 7) Remote work journey - Day 8 8) Remote work journey - Day 9 9) Remote work journey - Day 10 10) Working from home - Day 11 11) Working from home - Day 12 12) Working from home - Day 13 13) Working from home - Day 14 14) Working from home - Day 15 15) Working from home - Day 16 16) Working from home - Day 17 17) Working from home - How to deal with big PRs? (Day 18) 18) Working from home - Make your software easy to change (Day 19) 19) Don't do Health Sprints - Working from Home journey(Day 20/21) 20) How to handle bug requests? - Working from home Journey (Day 22/23) 21) You should not be afraid of a conflict 22) Can developers challenge product decision? 23) Feedback, Feedback, Feedback - Working from home 24) Paying the bill for tech debt - working from home 25) How a wrong Hook can DDoS you - wfh edition 26) Calming down and starting architectural topics again - wfh edition 27) First relaxing week - 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.

Get this react

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

working from home (27 Part Series)

1) Starting remote work journey - Day 0 2) Starting the journey of remote work - Day 1 3 ... 25 3) Starting the journey of remote work - Day 2 4) Remote work journey - Day 3 5) Remote work journey - Day 4 6) Remote work journey - Day 5 7) Remote work journey - Day 8 8) Remote work journey - Day 9 9) Remote work journey - Day 10 10) Working from home - Day 11 11) Working from home - Day 12 12) Working from home - Day 13 13) Working from home - Day 14 14) Working from home - Day 15 15) Working from home - Day 16 16) Working from home - Day 17 17) Working from home - How to deal with big PRs? (Day 18) 18) Working from home - Make your software easy to change (Day 19) 19) Don't do Health Sprints - Working from Home journey(Day 20/21) 20) How to handle bug requests? - Working from home Journey (Day 22/23) 21) You should not be afraid of a conflict 22) Can developers challenge product decision? 23) Feedback, Feedback, Feedback - Working from home 24) Paying the bill for tech debt - working from home 25) How a wrong Hook can DDoS you - wfh edition 26) Calming down and starting architectural topics again - wfh edition 27) First relaxing week - wfh edition

Posted on Feb 28 by:

fokusman profile

Ferit πŸŒŸπŸ•Œ

@fokusman

Senior Software Dev from Berlin. Working at ZalandoTech.

Discussion

markdown guide