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.

console.group() 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 console.group 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.

ReactJS Tutorial for Beginners -10

Typescript: Javascript on steroid

What is Storybook and how is it used?

Creating Invoices in Node.js

YouTube Video | CSS3 in 10 days — Day 5

Constructor Functions for [JS] Web Developers

Build your chrome extension with react, typescript using webpack

React Native for Mobile App Development

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
Sean

Sean

More from Medium

3 React tips/tricks

React Worst Practices — The Beginning

React Architecture Patterns for Your Projects

React 18 new features and updates