DEV Community

Gündoğdu Yakıcı
Gündoğdu Yakıcı

Posted on

About React code structure

I started learn Next JS. But there's one thing I don't understand.
There are many types of writing in React. I don't know which one is better to use.

For example;

function Test() { return

test }

export default () =>


class Prices extends React.Component {
// some code

export default Prices;

Top comments (4)

dance2die profile image
Sung M. Kim

For Function Components (FC) I prefer named functions

const Test () => {}
// or 
function Test() {}

export default Test
Enter fullscreen mode Exit fullscreen mode

to export default () => {} syntax because of readability.

When you move your components around, say rename the file from Test.jsx to index.jsx for some reason, you have to dig thru code to see what it is for others.

You can use Class Components (CC) for handling error boundaries or to use life cycle methods not provided by Hooks (componentDidCatch & getDerivedStateFromError). CC isn't going away
but my personal opinion is that, FC with hooks seems to be where it's going (and I found FC w/ hooks much easier to write/reason about with shorter code).

gundogduyakici profile image
Gündoğdu Yakıcı

Thank you for informing me

elanandkumar profile image
Anand Kumar

It all depends on the component.

  1. Use class if you need to use component lifecycle methods.
  2. Other two are functional component with a bit different code style.
gundogduyakici profile image
Gündoğdu Yakıcı • Edited

Mmm.. I'm understand.. whichever is easier and convenient then choose one