2

I'm a beginner learning react js and I ask a lot of questions even if it looks simple.

In the Introduction of hooks section, It is mentioned

  • It’s hard to reuse stateful logic between components
  • Complex components become hard to understand
  • Classes confuse both people and machines

I don't know why they hate classes so much, inside which they have mentioned classes don’t minify very well, and they make hot reloading flaky and unreliable

And on Google, I found it's hard to understand how classes don’t minify very well

can anyone kindly answer this with an example

Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
  • 1) Class components are going to be way more verbose than their function counterparts. 2) The overwhelming volume of React questions regarding the misunderstanding of `this` in class components is excellent proof that people are confused by classes. 3) You cannot reuse functions that modify state in class components like you can reuse hooks. – Brian Thompson Jun 25 '21 at 15:37
  • *I don't know why they hate classes so much* - I don't know that its fair to say the "hate" classes. Classes extend far past just React components. It's just that function components have several advantages over classes when used as React components. – Brian Thompson Jun 25 '21 at 15:40
  • @BrianThompson very useful information & it would be great if provide an example for `cannot reuse functions that modify state` – Vikas Acharya Jun 25 '21 at 15:40
  • `cannot reuse functions that modify state` this is because by nature, those functions are members of the class they were defined in. You cannot export them from the class to be re-usable in other components. Thats the point of custom hooks. Re-usable behavior. – Benjamin Jun 25 '21 at 15:49
  • @Benjamin very easy explanation! If I'm not wrong you are talking about `this`. But still, I'm not able to understand `why classes don’t minify very well`. first of all, I'm not getting what is `minifying of the class`. – Vikas Acharya Jun 25 '21 at 15:55
  • [minification](https://developer.mozilla.org/en-US/docs/Glossary/minification) is basically just making your code footprint smaller so that it requires fewer resources with the trade-off of not being very human readable anymore. – Brian Thompson Jun 25 '21 at 16:24
  • @BrianThompson It's exactly the same as expected, Now, the question is How is different for functional components. I mean why minification of only class components causes flaky hot reloading? – Vikas Acharya Jun 26 '21 at 12:56
  • 1
    I think those are separate points. Minification is typically only done during production builds, whereas hot reloading is only done in development. So they probably mean those as separate drawbacks. As far as why, I don't know, maybe someone else knows – Brian Thompson Jun 26 '21 at 16:48
  • This is a relatively old question but to answer your question about hot reloading, when hot reloading a component, that component should be re-created. If you are using a class component, the whole class should be re-created so it looses it's state because the state of the component is stored in the class itself. But state is not lost in function components because state is not stored in the function body directly. (This is not limited to just state.) – Ugur Eren Jul 14 '21 at 01:51

0 Answers0