DEV Community

14 Beneficial Tips to Write Cleaner Code in React Apps

jsmanifest on August 18, 2019

Find me on medium Writing clean code is something that becomes mandatory at some point in your career especially while you're trying to obtain you...

Read full post

Sung M. Kim • Aug 18 '19

Thank you for the great post as usual.

I agree with 10. Use useReducer if useState becomes complex not just because you can co-locate concerns but also because you can extract that functionality out as you mentioned in 6. Put Independent Functions Outside of Your Custom Hooks.

I had to create a context (using tips on How to use React Context effectively) and had very easy time make it into a context value.

Chris Achard • Aug 18 '19

Good tips, thanks. In regards to "folderizing your components" - do you ever run into issues with so many files called "index.js"? That's just a little thing - but it always kind of confuses/bugs me when I have a bunch of index.js functions open, and I have to figure out which is which... Any tips for that?

jsmanifest • Aug 18 '19

No problem! And what I do is to not write anything in the index.js but to export default the actual file in the same directory.

src/components/Tooltip/index.js:

export { default } from './Tooltip'

import Tooltip from '../components/Tooltip'

You can also put a package.json in place of index.js as below:

src/components/Tooltip/package.json

{
  "main": "./Tooltip.js"
}

import Tooltip from '../components/Tooltip'

Either way the end goal is to write code in the actual Tooltip.js file.

Chris Achard • Aug 18 '19

Ahhhh - got it. Thanks! that's a good idea.

jsmanifest • Aug 19 '19

No problem :)

Dima • Sep 7 '19 • Edited

const removeFalseyImages = (images = []) => images.reduce((acc, img) => (img ? [...acc, img] : acc), [])

const removeFalseyImages = (images = []) => images.filter(Boolean)

Sorry don't read the whole article after this🤢😱

Usman Khalil • Aug 19 '19

You just showed an amazing list of good practices. Thanks for sharing them here

jsmanifest • Aug 19 '19

Your very welcome. Glad to hear that, Usman Khalil!

K-Sato • May 21 '20

Great post! Thank u!

Volodymyr Yepishev • Dec 20 '21

I think you might be interested in sort-imports plugin for eslint, it's configurable and could potentially do the import sorting for you.
Nice article 🙂