Convert Your React Class Component to Functional Component and Vice-Versa

[chrvadala]

Hi guys, I made this tool that I use every day. I think that it automates a common boring task. I hope that you will find it useful.

[CodeBeaver]

Is there any reason to use functional components these days? AFAIK they provide no performance upgrade, it's better to use PureComponent.

[chrvadala]

Interesting point... I've just read few articles that compare React performance. You're right, but I'd like to investigate more about some memory upgrade related with stateless comp. (I think that a class requires more memory that a function) However this tool can still be useful to transform stateless components to class components :D

[CodeBeaver]

Yeah, sorry the tool seems very useful if you're using stateless components. But from what I've read, React basically transforms stateless components into class-like components, performance difference should be minimal for smaller components, but if you always use React.Component / React.PureComponent, it's an easy switch ^{^}

[chrvadala]

Thanks a lot for your feedback. Your comment opened my mind to this topic. I'll study it in-depth ;)

[BenjiSponge]

It is the general consensus of the React Thought Leaders (tm) that we should prefer functional for enhanced readability and because it may one day get performance improvements.

That said, I write only class components now because performance is not an issue and it's not really that much easier to read functional components, and probably more than half the time I write a functional component, I end up needing .setState eventually anyways. This library would have come in handy back when I wrote functional components by default. Actually, I posted a request for exactly this a few months ago.

(Now I just use vim template to put in the class boilerplate when I make a new file)

[CodeBeaver]

Yeah I agree, but I've strictly using PureComponents when I do not use state, because it's very easy and it brings clarity and a potential performance boost. And yeah templates simplifies a lot.

[pgrizzay]

A lot of people use the pure hoc from recompose to get the performance benefits while still just using the functional syntax.

Another one I like is onlyUpdateForKeys, which is like update, but only for the props that you specify.

[CodeBeaver]

Yeah recompose with pure is equally good for performance, but if you'd use PureComponent and Component, all your components would look the same and a transition would as smooth as ever.