DEV Community

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

George WL • Jul 10 '23

Why are you making so much use of Class components?

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

Dev Paul • Jul 11 '23

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

Rense Bakker • Jul 31 '23

Deprecated as per React 18 and the new React docs.

CitronBrick • Jul 13 '23

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

Andrew McCallum • Jul 14 '23

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

Amn3s1a2018 • Jul 10 '23

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

Fabio • Jul 11 '23

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

Ayush • Jul 13 '23

Everyone uses all of these just they don't know

Rense Bakker • Jul 31 '23

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

Erick Torres • Jul 12 '23 • 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('....')
  })()
}, []);

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

Anuradha Aggarwal • Jul 12 '23

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

Deyvson Aguiar • Jul 13 '23

Thanks for article ,👏👏😃

Panayiotis Georgiou • Jul 16 '23

THANKS A LOT!

Julio Herrera • Jul 10 '23

Amazing!

Hennry Smith • Jul 19

Great Design Patterns. I like them.

Anuradha Aggarwal • Jul 13 '23

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

Comment hidden by post author - thread only accessible via permalink

Tom Gooden✨ • Jul 12 '23 • Edited

Class components... MY EYES 🤮

cesar • Aug 4 '23

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

Brayan Paucar • Jul 14 '23 • 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

8kigai • Aug 14 '23

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

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