Skip to content

@julienben julienben released this Apr 18, 2019

v4.0: "The One With Hooks (And Much More)" Edition

React Boilerplate v4.0 is out and it's a doozy! Here are the highlights:

  • React has added many new features and it's time for React Boilerplate to embrace them.
    • We now use React.lazy and Suspense for component lazy-loading instead of an external library.
    • We've added useInjectSaga and useInjectReducer hooks to manage saga and reducer injection. They're integrated into the generators and thus become the new defaults. (Should you need them, the HOCs are still there.)
    • The generators don't support classes anymore. The PureComponent vs Component choice was replaced with an option to wrap your component inside React.memo.
  • After much deliberation, Immutable.js is finally gone. We've added Immer instead. With it, we can write very concise and readable reducers while sticking to native JavaScript data structures.
  • Following the release of React Hooks, it's become even clearer that react-testing-library is now the industry-standard for React DOM testing. Workarounds for the incompatibilities between enzyme and styled-components are gone and we can now write leaner and more meaningful tests.

There are many more changes to our documentation, internals and general project setup. You can find a full changelog below.

Huge thanks to @Mensae, @gretzky, @jwinn and everyone who helped review or submit PRs! If I've forgotten your contribution in the credits below, please let me know.

We hope you enjoy this release and welcome any feedback, bug reports or feature suggestions you can send our way!

Main

  • Remove Immutable.js in favor of Immer (@julienben, @robertaird)
  • Migrate from enzyme to react-testing-library (@Mensae)
    • New instructions for snapshot and behavior testing
  • Embracing Hooks (@julienben)
    • Add eslint-plugin-react-hooks
    • Migrate all class components to functions
    • Add useInjectSaga and useInjectReducer hooks
    • Remove generator options to extend Component or PureComponent. Replace with a React.memo option.
  • Use React.lazy and Suspense instead of loadable-components to code-split and asynchronously load components (@julienben)

Documentation updates

Internals updates

  • Many dependency updates including: (@julienben)
    • react and react-dom (16.6 to 16.8.6)
    • react-redux (5 to 7) (@bumi001, @jwinn)
    • connected-react-router (4 to 6)
    • react-router-dom (4 to 5)
    • redux-saga (0.16 to 1)
    • sanitize.css (4 to 8)
  • Update default saga injection mode to DAEMON (@howardya)
  • Update generators to reflect all the stack changes
  • Migrate default Node version to lts/dubnium (@julienben)
  • Fix support for stylelint (@jwinn)
  • Fix setup script for Windows environments (@Mensae)
  • Generate passing tests for components/containers (@mjhost)
  • Rewrite generators code (@Mensae)
  • Complete rewrite or generate-templates-for-linting.js (@Mensae)
  • webpack.DefinePlugin => webpack.EnvironmentPlugin (@nshimiye)
  • New Webpack code splitting config (@julienben)
  • Remove process.noDeprecation = true (@spawnia)
  • Miscellaneous fixes (@ngtan)

Project maintenance

Assets 2
You can’t perform that action at this time.