How to Create React Application

An opinionated version of CRA template with some exrta tools added by default.

Tools

• Uses react-scripts v4 with enabled fast-refresh and web-vitals support out of the box
• .vscode/settings.json to use prettier as a default formatter and enable formatting on save
• .vscode launch.json to enable debugging in vscode. Also it's encouraged to use popular Jest extension
• added husky with prettier and lint-staged for pre-commit hook with respective configurations inside package.json
• customized linter config (refer to package.json)
• added storybook for faster component development
• added "analyze" script to analyze a bundle size

Performance recommendations and best practices:

• Use memoization ( pure components, useMemo, useCallback, reselect, ...):

  • Remember that functional components are not pure by default. You should wrap them with React.memo to make "pure".
  • You might not need to make all components "pure" by default and first investigate which components are frequently re-rendered, but very often you can foresee where better to add React.memo wrapper, for example to lists items, parent components for a large component tree, etc.
  • If you are not sure you will have enough time to investigate and improve the performance, you might want to use "pure" components by default as "shallow" comparison will be much cheaper than the component react component "render".

• Keep an eye on properties you pass to component to avoid additional re-renders:

  bad:

  <MyComponent myComponentProps={{ …someProps, newProp : ‘test’ }} />
  

  good:

  <MyComponent {{ …someProps }} newProp={‘test’} }} />
  

  
  bad:

  <MyComponent myCallback={() => {...}} />
  

  good:

  <MyComponent myCallback={myMemoizedCallback} />
  

  
  

• Same for properties passed ot a context: bad:

<MyContext.Provider value={{ ...someProps}}>...</MyContext.Provider>

good:

const memoizedContextProps = useMemo(() => {...deps}, [...deps]);
<MyContext.Provider value={ memoizedContextProps}>...</MyContext.Provider>

• Use "renderSomething" method pattern with a causion inside components. It might be better to create a separate component to let react control rendering and avoid additional re-renders
• Component "key" property should be unique, but stable. Don't use uuid() as a key property as soon as it generates new key every time.
• Use chrome developer tools "Performance" tab and react developer tools "Profiler" tab to inspect slow places
• Use code splitting with React.lazy,Suspense and redux-injector functions from "utils" to dynamically inject sagas and reducers (examples at https://www.npmjs.com/package/redux-injectors). To investigate if it works well enough: open DevTools → Ctrl/⌘+P → Coverage → "Start instrumenting...".
• If you want to preload fonts, make sure you use the crossorigin="anonymous" attribute.
• If you have images, check if you can use smaller size, dont forget to compress images (image-webpack-loader in front of url-loader) and probably you can use loading="lazy" attribute inside <img> tag

Customization

• As an "eject" alternative use craco package to customize the webpack build
• If you are using material-ui, ensure that the tree shakuing works well, if not check out this page to configure babel: https://material-ui.com/ru/guides/minimizing-bundle-size/
• If you are using lodash: try babel-plugin-lodash to make such import as import { get } from 'lodash' into import get from 'lodash/get', which helps to avoig bundling the whole library
• Try purgecss-webpack-plugin to remove an unused css

Testing in VSCode

• You can debug tests in VSCode: launch configuration already added
• Recommended to use Jest extension with enabled "show coverage" option to track test coverage immediately
• Recommended to use Jest runner extension to run and debug individual tests easily: above each "describe" and "test" the repsective "Run|Debug" links will appear. Refer to this issue wit the latest react-scripts: firsttris/vscode-jest-runner#136

Usage with redux

• Use redux chrome extension
• Use @reduxjs/toolkit to create actions and reducers