Best React Hacks For Lazy Devs

If you wanna log the props to an expression style component but can’t be bothered to convert it, put the log in parentheses then add chopsticks ||:

Note. you have to use the or operator because console.log returns undefined.

If you’ve no idea where a function’s being called from, log an Error object in it and you’ll get a stack trace in the console:

Notice the third line on each log, one is being called from EnterPasscode.tsx line 106 and the other is from appConfigSaga.ts line 576.

Is React giving you a ton of warnings and errors in your console about keys and deprecations but you’re too lazy to fix them?

Add a distinct string to each of your comments:

Then filter the logs by that string in your console:

Want to know what a function does without having to read all the docs? Just add it to the window then you can play with it in the console.

I do this all the time with moment because I can never remember which functions return what:

Want to write more ternary question marks? Most people know that using || and && is a super quick way of writing conditions, but did you know there’s a ?? as well?

This says, if state?.bookings is undefined return {}.

Why not just use ||?

Whereas || is useful for evaluating if a value is “falsy” (so anything that the if statement thinks is false) ?? only evaluates things that are null or undefined. It’s basically a bit stricter.

This is useful because you might be accessing a property that’s value is false…

Get it?

You can also use ? when accessing object props with a variable…

It’s weird though, you would have guessed the syntax to be bookings?[id]. I think this is because the optional chaining operator is actually ?. rather than just ? on its own: MDN Optional Chaining. is super useful when React causes your logs to print over and over.

Say I have a function that has a loop inside it. If I log the outcome of each loop iteration I’ll get a ton of logs because not only is the loop logging each iteration but React is also calling the function over and over as the component re-renders:

I could work out where the iteration starts and ends here but that would take way too much effort. An easier way is to wrap the contents of my function with and console.groupEnd:

Now it groups the logs per render:

Need to refresh a component. Force it to re-render by adding a key to it.

Technically you can do it with any prop but key is on every React component so you can use this on a component from a module you’re not in control of.

To be honest I’m yet to actually use this, but still, good to know.




Love podcasts or audiobooks? Learn on the go with our new app.

Install React-Bootstrap into React.js App?

Install React-Bootstrap into React.js App?

Coding Challenge- Navigating to another page by using lifecycle meth

JSON And Builder Libraries

Research project: Which is the best caching strategy with GraphQL for a big relational database?

Execution Context

Web GIS Application Development for Reachability Analysis: Part 2

How to get the project ID in a Java Cloud Function?

Getting Started with the GridDB NodeJS Client

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


More from Medium

How I Structure My React Projects

Top React Frontend Frameworks and Component Libraries in 2022

8 powerful React libraries to try in 2022

5 Ways to Avoid React Component Re-Renderings