What if a const isn't really constant in Javascript?
Last week, I received a support request from a junior developer on my startup team. He faced a weird bug, he spent the whole afternoon, even with ChatGPT, but still hit a dead end.
Context
This is the config for a chart component. We’re using charts from “@ant-design/charts”.
He puts the default config in another TS file, as a const, then imports it using the spread operator, like below: ...ReportChartDefaultConfig. Nothing changed.
He brings the config directly to the chart component, it works.
The twist here: it’s literally the exact same code. Nothing is different.
First try: I believed he might not be paying attention to how React renders. It could be the chart renders with a non-filled config first, then the full config comes later. But logs show the props don’t change at all.
Second try: Maybe the type of a nested property was changed. I was afraid he accidentally passed a string instead of an object or something. But things seemed normal.
Third try: I jumped into the branch and threw in some console logs. By eye, I couldn’t see any difference. Then I decided to trust the machine more—used isEqual from lodash for deep compare.
Now it’s always false.
At this point, I believe it was mutated during runtime. And I hate this. These kinds of bugs are crazy hard to trace.
This is not the first time. I once had to fix a bug where another dev shallow-cloned objects, and they stayed linked across components and layers. Then suddenly, one component mutated, and the whole chain broke, causing weird glitches and bugs. But this is the first time in my life I’ve seen a third-party lib mutate the props it was passed, which was linked to our default config.
The solution? Pretty simple: I replace it with cloneDeep from lodash. It ensures you create a new object with the same values, but different memory references.
My takeaway:
Sometimes, the bug isn’t in your code. It’s in the library you trusted
Understanding foundational concepts like shallow clone vs. deep clone is never redundant.
Think twice: is the spread operator (…) enough, or do you actually need cloneDeep?