Why are no components extending React.component?

Is this for performance purposes? Why not use mapDispatchToProps ?

[wedneyyuri]

Hi @adriaanbalt, as I said before, arrow functions aren’t the most performant solution but probaly the most readable when the components are simple (just render basic html structures). Your example isn’t wrong (my coments below).

In general, as arrow functions are just syntax sugars for React Component I use this version to develop simple components (no handlers, no logic) and I extend React.PureComponent (https://facebook.github.io/react/docs/react-api.html#react.purecomponent) to develop complex components (handlers, logic, control render lifecycles, etc…).

If you want to stick using the same syntax in the whole project I advise you to use the 2nd version.

import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { provideHooks } from 'redial'
import { StyleSheet, css } from 'aphrodite'

import { initialRequest, someAction } from 'common/shell/actions'
import { getInitialData } from 'common/shell/reducer'

const redial = {
  fetch: ({ dispatch }) => {
    // doesn't seem to fire on initial load, 
    // because it was already done in server side and stored in state
    dispatch(initialRequest())
  },
  defer: ({ dispatch }) => {
    // defer is the only way to make the request on initial load due to client/index.js Line: 71
    dispatch(initialRequest())
  }
}

const mapStateToProps = state => {
  return ({
    /*
    This works great, but there is a drawback: "someData" is calculated every 
    time the component is updated. If the state tree is large, or the 
    calculation expensive, repeating the calculation on every update 
    may cause performance problems.
    See https://github.com/reactjs/reselect#motivation-for-memoized-selectors
    */    
    someData: getInitialData(state)    
  })
}
const mapDispatchToProps = dispatch => bindActionCreators({
  someAction
}, dispatch)

const App = ({ children, someData, someAction }) => {
  // WARNING: It's can be a problem because "clickButton" will have 
  // a diferent value during every render phase. 
  // See http://stackoverflow.com/questions/39260595/event-handlers-in-react-stateless-components
  const clickButton = () => someAction()

  return (
    <div className={css(styles.root)}>
      {
        someData //data from the initial requeset
        &&
        <h1>someData.title</h1>
      }
      <button onClick={clickButton}>Click</button>
      {children}
    </div>
  )
}

const styles = StyleSheet.create({
  root: {
    maxWidth: 700,
    color: '#000',
    margin: '2rem auto',
    padding: '0 1rem'
  },
})

export default provideHooks(redial)(connect(mapStateToProps, mapDispatchToProps)(App))

[adriaanbalt]

came across this article… https://medium.com/dailyjs/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba