Twitter | Search | |
:party-corgi:
If you find yourself writing a lot of `renderThing` methods on classes to split up your React render method, what you probably want to do is pull that area out into its own component because a render*() function effectively means theres enough complexity to be worth breaking down
Reply Retweet Like More
:party-corgi: 6 Jun 18
Replying to @chrisbiscardi
Most (if not all) > 500 line components I've seen have many render* functions to abstract areas of render(). Pay attention when this happens and split the code out into its own file. render* functions tend to use a lot of "side-pull" props/state rather than direct usage.
Reply Retweet Like
:party-corgi: 6 Jun 18
Replying to @chrisbiscardi
accessing this.props/this.state, etc in a render* function obscures it from view in the component's render(), making it harder to know what's going on (ex: you now have to traverse the file to find out if renderThing is using prop a)
Reply Retweet Like
Mike Skowronek 7 Jun 18
Replying to @chrisbiscardi
It's not always the case. Also remember that having big tree of components could have performance impact if you are doing rerenders of all components (paging of grid etc). Not sure how it looks when using fragments instead of divs.
Reply Retweet Like
:party-corgi: 7 Jun 18
Replying to @coderitual
I'd be happy to see an example of a large component tree that is appropriately virtualized, etc with these performance characteristics.
Reply Retweet Like
Hugo 7 Jun 18
Replying to @chrisbiscardi @mxstbr
Adding a functional component in the same JS file is easy enough, if anyone else ends up needing, separate to its own file/module. One of the cool things that can't be done with Vue's single file components.
Reply Retweet Like
Corey Light 7 Jun 18
Replying to @chrisbiscardi
I think about this a lot. I write components all the time with several render methods. I think about splitting them out but I usually don't because they will only be used once. I guess it's nice either way because it's pretty easy to rework as needed?
Reply Retweet Like
:party-corgi: 7 Jun 18
Replying to @coreyalight
yeah, it's more about code organization than about re-use patterns. Some reusable patterns will fall out, but it's more about reducing the complexity to be able to focus on a single encapsulated thing at a time. It's easier to delete a file than multiple things inside a file.
Reply Retweet Like
John Otander 7 Jun 18
Replying to @chrisbiscardi
I've been meaning to write a post about this very topic because I see this pattern in apps a lot. Now I can just link your tweet instead because you've summarized it very well. <3
Reply Retweet Like
:party-corgi: 7 Jun 18
Replying to @4lpine
<3 I'd still read you post :)
Reply Retweet Like