DEV Community

Cover image for React Design Patterns

React Design Patterns

Anuradha Aggarwal on July 09, 2023

Hello developers!! While developing apps in React, I'm sure you have come across different use cases which cannot be easy to solve using the same o...
Read full post
Collapse
 
georgewl profile image
George WL •

Why are you making so much use of Class components?

I believe they're seen as bad practice, no?

Collapse
 
devpaul3000 profile image
Dev Paul •

Not really bad practice per say. Just that their use are discouraged and instead functional components should be used.

Collapse
 
brense profile image
Rense Bakker •

Deprecated as per React 18 and the new React docs.

Collapse
 
citronbrick profile image
CitronBrick •

I don't believe that class components deserve the bad rep.

Collapse
 
stretch0 profile image
Andrew McCallum •

I'm a big fan of classes and object oriented programming but I don't think classes are a good use case for react components.

Dan Abramov explains here how class components can lead to bugs which are avoided with functional components.
overreacted.io/how-are-function-co...

Furthermore, you can't use hooks in class components so you are limited to what libraries and other parts of your code base you can use if you mix and match between classes and functional components

Collapse
 
amn3s1a2018 profile image
Amn3s1a2018 •

From react components docs: "Class components are still supported by React, but we don’t recommend using them in new code."

Collapse
 
snakepy profile image
Fabio •

Lol I use all of them but never heard that they are called this way.

Collapse
 
pappijx profile image
Ayush •

Everyone uses all of these just they don't know

Collapse
 
brense profile image
Rense Bakker •

There's a difference between using a library that happens to still use class components and writing class components yourself though...

Collapse
 
erickjth profile image
Erick Torres • • Edited

Few things to take into account:

  • It is not recommended using async functions in the useEffect callback, instead do something like: 
useEffect(() => {
  (async () => {
    const response = await fetch('....')
  })()
}, []);
Enter fullscreen mode Exit fullscreen mode
  • Instead of running this const { Provider } = ListContext; on every render, just move to outside of the component. 
const { Provider } = ListContext;

export const Component = (props) => {
  return (
    <Provider value={...}>
          ......
    </Provider>
  )
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
anuradha9712 profile image
Anuradha Aggarwal •

@erickjth Thank you for your suggestions. I'll surely update the examples.

Collapse
 
panayiotisgeorgiou profile image
Panayiotis Georgiou •

THANKS A LOT!

Collapse
 
deyvsonaguiar profile image
Deyvson Aguiar •

Thanks for article ,👏👏😃

Collapse
 
julioherrera profile image
Julio Herrera •

Amazing!

Collapse
 
anuradha9712 profile image
Anuradha Aggarwal •

@just-another-girl-w3 I'm glad you find it useful!!😃

Collapse
 
tchesa profile image
cesar •

Am I the only one that thinks that Presentational/Container pattern does the opposite of helping?

Collapse
 
good3n profile image
Info Comment hidden by post author - thread only accessible via permalink
Tom Gooden✨ • • Edited

Class components... MY EYES 🤮
Image description

Collapse
 
8kigai profile image
8kigai •

withLogging or withLogger ? I think you have a typo there.

Collapse
 
kralion profile image
Brayan Paucar • • Edited

Great article , please checkout this website refactoring.guru/design-patterns and tell me what’s the difference between patterns with those that you mentioned

Some comments have been hidden by the post's author - find out more