A few things every new React developer should know (part 2)

Kangho Kim

Published in

DeepScan

4 min readJul 20, 2017

In the previous post I discussed the following mistake patterns of React with the examples from open sources.

Typo of React API
Incorrect return value from render()
Invalid event handler function
…

Today I will go into additional pitfalls. These are as follows:

Invalid event handler of string type
Event handler not bound with this
Incorrect style property
Missing key property in a React element

Let’s start part two. Before you proceed, I recommend reading the previous post.

In this article, I explain other confusing things for new React developers with the examples from open source projects.

1. Invalid event handler of string type

In HTML, an event handler is specified as a string. For example, script code inside string literal represents onclick handler like <image src="hello.png" onclick="alert('Hi')" />.

However, only function objects are allowed for React’s event handler. So when you specify an event handler as a string, React throws an exception.

In the test code of React, you can see a test for this invalid string-typed event handler.

Let’s see an example: __tests__/EventPluginHub-test.js (Line numbers are different because only relevant parts are shown.)

Note that you should not write an event handler like <div onClick="console.log('clicked')">. Right way is below:

DeepScan Rule

DeepScan’s BAD_EVENT_HANDLER rule can prevent developers from making this mistake by checking whether a string is specified as a React event handler.

2. Event handler not bound with `this`

Let’s look at another thing about React event handler.

Since React does not provide this object when calling an event handler, a TypeError exception is thrown when you access the property of this in the event handler.

To solve this problem, you need to do one of the following:

Use Function.prototype.bind() to explicitly bind this with the handler
Use an arrow function of ES6 that automatically bind this

Note that React.createClass() automatically binds member functions to this, so you need to be especially careful when converting it to a ES6 class.

In the below site-settings/form-general.jsx example from open source project wp-calypso, an error occurs because unbound this.trackUpgradeClick function is specified as an event handler.

I’m glad to see this problem is fixed by changing trackUpgradeClick as an arrow function. (Check this commit)

Change to an arrow function for a valid binding

I think this kind of mistakes can be common especially to front-end developers not familiar with ES6.

DeepScan Rule

DeepScan’s EVENT_HANDLER_INVALID_THIS rule can prevent developers from making this mistake by checking whether an event handler function is bound to this.

Invalid event handler functions not bound with ‘this’

You can track down the problem easily because the alarm says this is accessed in trackUpgradeClick function body.

3. Incorrect `style` property

Similar to the case that an event handler cannot be specified as a string, React’s style property does not accept a string that represents CSS rules.

Unlike HTML, you should always specify style property as an object. React will throw an exception when you specify a value other than an object, null, or undefined.

You can see this case in the test code of React. (__tests__/ReactDOMComponent-test.js)

DeepScan Rule

DeepScan’s BAD_STYLE_PROP rule can prevent developers from making this mistake by checking whether style property is specified as a non-object value.

4. Missing `key` property in a React element

When updating the DOM tree React optimizes rendering through diff algorithm utilizing key property.

So, rendering can be inefficient if each child element of a DOM node does not have a key property. Also, React warns about this situation.

Therefore, you should specify a key property when you define a child element in the collection.

Below components/home.js code from open source project react-vis has missing key property problem for the collection stored at content.

This problem was fixed in the later commit by adding a key property.

Add a ‘key’ property for the child element

DeepScan Rule

DeepScan’s MISSING_KEY_PROP rule can prevent developers from making this mistake by checking each element in the collection for the existence of key property.