Recently I had to hold a React workshop for some developers from a company I am working with. Some of them were juniors and others where experienced backend devs, but, to my surprise, there were some common issue patterns that kept repeating for both categories. So, Iāve decided to make a list of these common mistakes hoping it will save you some moments of frustrations when you first start to learn React:
1. Anything that it is state changing should be done via the setState method
Maybe this is an old subject, and for seasoned React developers it may be obvious but, it is still one of the most encountered issues when starting with React.
So, never ever try to do something like this:
this.state.someValue = 10
It will not work, the view will not be updated and the worst thing is that we will not get any error on the console telling us that we did something wrong.
As a general rule of thumb, always use setState when you want to change something in the state. This will ensure that the render() method is triggered and the view is updated.
this.setState({someValue:10})
2. The setState method is async
Speaking of state. - the state in React is async. It means that if we call setState, we don't have a guarantee that, when the next line is executed, the change actually took place. This can catch off guard even developers that are using React for quite some time.
If we try to use setState multiple times in the same function or code block, we may get into some strange behavior. For example, on a click handler, if we have some code like this:
doStuff = () => {
this.setState({ foo: this.state.foo + 1 });
if (this.state.foo > 7) {
this.setState({ bar: 20 });
}
}
If you use this code you will see that bar becomes 20 only when foo is 9. This is the result of the async nature of setState. When the if statement is evaluated, the setState will not have enough time to make the changes. So when foo is 8 the if statement is still evaluated as false.
In order to fix this letās take a look at the setState documentation. We will discover a mysterious callback function that will ensure the fact that some code will be run only after setState actually makes the change. So, we can try something like this:
doStuff = () => {
this.setState({ foo: this.state.foo + 1 }, () => {
if (this.state.foo > 7) {
this.setState({ bar: 20 });
}
});
};
And below you can see the previous example, but this time implemented with the callback function.
3. Sending props as Strings instead of Numbers
If you used to write a lot of pure HTML, you may find it natural to write something like:
<MyComponent value="2" />
However, it will send the value prop to MyComponent as a String. So, if you need it as a number, you will have to use something like parseInt. Or do it the React way: use curly brackets when sending it:
<MyComponent value={2} />
It will also work if you have to send some other javascript entities like objects or arrays:
As an alternative, you can use react props-types to define what data type a React property should be. Please note that props-type now has its own npm package.
4. Not using the right versions of what an example or a tutorial is using.
This was not directly related to the workshop, but itās in the same category. I recently had one reader of js-craft.io emailing me and saying he is trying to follow the React API example, but for some reason, he gets some exceptions, even if the code is exactly the same. Well, it turned out that he opened an older project and tried to use the React 1.6 Context API. Meanwhile, in his package.json ,the React version was below 1.6. So, remember to check the versions from package.json š !
The following ones are still examples of what React beginners do (and from time to time we all make them), but fortunately, they are way easier to catch as they come with some errors or warnings in the console.
5. Using class instead of className
In React, if you want to assign a CSS class name to a component donāt try to do something like:
<h1 class="css-class-for-titleā>Some title here</h1>
In React-JSX it will fail, as the class keyword by ES6.
Instead use className:
<h1 className="css-class-for-titleā>Some title here</h1>
6. Not starting a component name with a capital letter
This one is pretty self explanatory. If you will write something like:
class myApp extends React.Component {
}
You will get a nice and beautiful: If you meant to render a React component, start its name with an uppercase letter. error. So, React components start only with a capital letter.
7. Trying to use objects with curly braces - children not accepted as object
This happens mostly to debug. When you want to show the contents of an object in React donāt expect that curly brackets in React will work similar to the standard console.log. If you will try to use curly brackets with an object you will get an error:
render() {
let objToPrint = {
name:"Bob",
age: 5
}
return (<div>{objToPrint}</div>);
}
If you really have to print the contents of that object then go for JSON.stringify:
render() {
let objToPrint = {
name:"Bob",
age: 5
}
return (<div>{JSON.stringify(objToPrint)}</div>);
}
And as a closing thought, even if itās not an actual mistake: try to break down and reuse components as much as possible. It's easy to write bloated components when you first start using React. Small classes/modules/whatever are easier to understand, test, and maintain, and the same is true for React components.
My mistake, when starting out with React, was under estimating just how small my components should be. Of course, the exact size will depend upon many different factors but, in general, my advice would be to make your components significantly smaller than you think they need to be.
