DEV Community

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...

Read full post

Savchenkov Dmitry • Jul 4 '19

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>
)

Ovie Okeh • Jul 1 '19

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...

Petyo Ivanov • Jul 2 '19

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!

Ario Setiawan • Jun 30 '19 • 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

ktowen • Jul 8 '19 • 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...

Alleo Indong • Jul 4 '19

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.

Oksana Romaniv • Mar 17 '20

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!

Thang Chung • Jul 1 '19

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

Attila Szeremi⚡ • Jul 13 '19

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.

Jalaj • Jun 30 '19

Some very good tips here. Thanks!

Gilles Kagarama • Jul 5 '19

Nice post, handy!