I only use classes when I need to use a ref within a component (which is quite rare). I use redux for all my state management instead of storing state within the component itself. Everything else is a stateless functional component. A typical component would look like
import React from "react";
import { connect } from "react-redux";
function _HelloWorld({name}) {
return <div className="intro">{name}</div>
}
function mapState(state, ownProps) {
return {
name: state.name
}
}
function mapDispatch(dispatch, ownProps) {
return {}
}
export const HelloWorld = connect(mapState, mapDispatch)(_HelloWorld)
I realize this is just a snippet and probably written off the top of your head (rather than reflecting real code), but a couple quick suggestions for improvement there:
- Only add the `ownProps` argument to `mapState` or `mapDispatch` if you actually need it, because `connect()` will now call those functions more often (whenever the incoming props have changed). If you're not actually _using_ values from `ownProps` in there, don't add those arguments.
- The `mapDispatch` function isn't doing anything at all in that example, and can be omitted completely
- I personally recommend using the "object shorthand" form of `mapDispatch` instead. To me, there's never actually a good reason to write a separate `mapDispatch` function. Just write action creators, and pass them in an object to `connect`, like this:
