loading...
Cover image for Why I will no longer be using console.log() to check React state updates

Why I will no longer be using console.log() to check React state updates

hymanaharon profile image Aharon Hyman ・3 min read

As a front end developer one of the key tools in my debugging arsenal is the console log. The ability to log data and check that it renders as expected in the browser allows you to quickly debug specific parts of your code in a quick and neat fashion.

I work in React and being able to console log your state and check that the components are rendering as expected is a key development pattern.

When your state is simple and you have one or two values to monitor, console.log() is great but when you start adding more to your component state especially in a Class component this can start getting very ugly as your state object being output is minified.

Console.table()

Console.table is a great way of logging to the console that will parse your data and log in the console as a table.

Using the console in Chrome dev tools we can see console.table() at work

Alt Text

The function console.table() takes either an array or an object and can also take an optional parameter ‘columns’

The first column will be labelled index and in the case of an array it will display the indices, while an object will display the Key or property names.

The table also works as you would expect allowing you to sort the column by clicking on the title.

Note that in Firefox console.table() is currently limited to 1000 rows

Columns
Where this really comes in useful is the columns parameter.
As a default the columns.table() will list all the elements in an object. The columns parameter takes an array of column names or values and allows you to select the values you would like displayed. By using this you are able to parse an array of large objects and select only the columns relevant to you.

Logging your state!
Going back to React, a common pattern is to store a server response in your state, often there is data involved that will not be used in the component you are working on.
Using the columns parameter you can display in the console only the columns of data that you are actually watching

Lets see what that looks like
In the below example our api call returns a json of users and they are stored in the state.
Using console.table(users) in the render we will be able to produce the below table and check the data is as expected, without having to build out our table component in the ui.

Alt Text

Now if we wanted to build a quick filter button to check which of our clients paid in Yuan Renminbi we could do the following

const onlyYuanUsers = users.filter( user => user.currency === "Yuan Renminbi")
console.table(onlyYuanUsers)
Enter fullscreen mode Exit fullscreen mode

this will produce a filtered table to check it returns the values you need.

Alt Text

But this is more data than you need to display to check your filter is working.

By passing in the columns parameter, you are able to select which columns you want to select by defining an array of the column names.

The output will be a more compact table allowing for an ‘at a glance’ comparison.

console.table(onlyYuanUsers, ['id', 'currency'])
Enter fullscreen mode Exit fullscreen mode

Alt Text

It is worthy of note that as of publishing console.table() is supported by all modern browsers with the exception of IE (I did say modern)

Discussion

pic
Editor guide
Collapse
kingkool68 profile image
Russell Heimlich

I just saw another neat console trick the other day that you could combine with console.table() as well.

console.log({ myVariable }); // Same as { myVariable: 'whatever the variable value is' }
Enter fullscreen mode Exit fullscreen mode

Now your logged values are named.

twitter.com/chriscoyier/status/132...

Collapse
hymanaharon profile image
Aharon Hyman Author

That's pretty cool as well thanks for showing it to me!

Collapse
gautham495 profile image
Gautham Vijayan

As a frontend developer this is a phenomenal tool to learn. Thanks for making this article.

Collapse
unsignedmind profile image
unsignedmind

Cool stuff :). Thanks for making us aware.

Collapse
zenndiagram profile image
ZennDiagram

OMG. Such mega wow cool!

Collapse
zenndiagram profile image
ZennDiagram

You so good!