use function instead of class in component

[cometta]

Hi guys, What do you think about using this pattern in meatier https://github.com/ghengeveld/react-redux-styleguide#components-and-containers

example of component /meatier/src/universal/modules/kanban/components/Kanban/Kanban.js

[mattkrick]

Yeah, it's a great pattern & i'm all for moving in that direction. The reasons they currently aren't functions are:

• i wrote those components before functional components were a thing
• there's currently no performance benefit (unless react v15 changed that?)
• https://github.com/gaearon/babel-plugin-react-transform/issues/57

from that last bullet point, this is worth a read: https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.vapjtcgk7

like any big idea, it's worthwhile to let the dust settle for a couple weeks to see how the whole community handles the decision & based on community response, it may be worthwhile to use the lower-level HMR api instead. i like where your head's at though!

[wenzowski]

Could someone explain the value of this pattern over multiple render functions in a class, or point me in the right general direction? Will a future version of react assume all functional components are pure, perhaps?

[wenzowski]

Found stateless functional components so I'm assuming a future version of React will check argument equality before rerunning a functional component?

[mattkrick]

it goes back to the idea of smart vs. dumb components. smart ones need lifecycle methods & HOCs & all the joys of classes. Dumb ones take in props & spit out HTML. In theory, a pure function takes less memory & rerenders faster than a class.