How to fix `React DevTools encountered an error: RangeError: Invalid array length`

I recently found this rather obscure message in my dev tools console when working on a React + Gatsby based website. It took a bit of digging to figure out where it was coming from since the stack trace was all React internals.

Turns out I had made a simple mistake some weeks prior when setting the display name on a component that was being wrapped with forwardRef: I had passed in the component itself as the value of the displayName property instead of a string.

 const Something = React.forwardRef((props, ref) => <div>…</div>)
-Something.displayName = Something
+Something.displayName = "Something"

Turns out React DevTools isn’t so fond of that.

Hopefully this will save someone (probably me) time in the future!

 
28
Kudos
 
28
Kudos

Now read this

Quick Tip to Clean Up Rails Logs

Every few months I use this command to empty each and every one of my test.log and development.log files in the src folder of my laptop: find ~/src \ -maxdepth 6 \ -type f \ -mindepth 1 \ \( -name "test.log" -or -name "development.log" \... Continue →