DEV Community

Cover image for 10 Things NOT To Do When Building React Applications

10 Things NOT To Do When Building React Applications

jsmanifest on June 29, 2019

Follow me on medium if you haven't already :) React is such a popular tool for developing in the web and i'm sure you react fans out there are fee...
Collapse
 
slide109 profile image
Savchenkov Dmitry

Thanks for the article, there are some great tips. Just a small amendment - I suppose it'd be better to avoid using double negation and use Boolean() instead.

const App = ({ items = [] }) => (
  <div>
    <h2>Here are your items:</h2>
    <div>
      {Boolean(items.length) &&
        items.map((item) => <div key={item.label}>{item.label}</div>)}
    </div>
  </div>
)
Collapse
 
ovieokeh profile image
Ovie Okeh

Regarding the inline functions, there's an entry on the React docs that basically says using them is fine if you're using React Hooks. Here's the link for those interested: reactjs.org/docs/hooks-faq.html#ar...

Collapse
 
petyosi profile image
Petyo Ivanov

re: 6 - syncing props with state is somewhat of an antipattern (but sometimes, unavoidable). React has a special static method which makes you feel bad when using it ;):

reactjs.org/docs/react-component.h...

Cheers!

Collapse
 
consciousness_dev profile image
Ario Setiawan • Edited

If You can make this post, i think you can post reverse version of this post, which is solution of this "Not To Do" :D

and for 2nd point, i always use bind like this

<Button onClick={this.myFunction.bind(this)} />

it is not make bad effects, isn't it?
thanks

Collapse
 
ktowen profile image
ktowen • Edited

->3. Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique.
reactjs.org/docs/lists-and-keys.ht...

Collapse
 
aindong profile image
Alleo Indong

11th -> Creating functions in render
Every time your app did re-render those functions are also recreated every time... that is why we have React Hooks now.

Collapse
 
oksanaromaniv profile image
Oksana Romaniv

It would be great if under each of the tips you provide the solution or "how to do". It's a bit confusing as a newcomer to React to understand what I should do instead. Thanks!

Collapse
 
thangchung profile image
Thang Chung

The point number 9 is quite cool and happens all the times when we coded

Collapse
 
amcsi profile image
Attila Szeremi⚡

For #6, aren't we supposed to use getDerivedStateFromProps()? That way the logic would only be needed there, and wouldn't need to be repeated in the constructor.

Collapse
 
jalaj profile image
Jalaj

Some very good tips here. Thanks!

Collapse
 
kagarama profile image
Gilles Kagarama

Nice post, handy!