Writing better code

[dafi]

eslint

eslint-plugin-react-hooks

https://blog.logrocket.com/12-essential-eslint-rules-react/
https://maxrozen.com/react-hooks-eslint-plugin-saved-hours-debugging-useeffect

eslint & react-hooks/exhaustive-deps

https://bobbyhadz.com/blog/react-hooks-exhaustive-deps

unused-react-imports

As suggested here we can run codemod

Check if we use JSX transform

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md

If you are using the new JSX transform from React 17, you should disable this rule by extending react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends").

defaultProps vs default arguments and re-rendering potential issue

jsx-eslint/eslint-plugin-react#2856 (comment)

airbnb

https://github.com/airbnb/javascript/tree/master/react#props

test and todos

Test all rules replacing plugin:react/recommended with plugin:react/allinto .eslintrc.json (comments are allowed on JSON)

  "extends": [
    "eslint:recommended",
//    "plugin:react/recommended",
    "plugin:react/all",
    "plugin:react-hooks/recommended",
//    "plugin:react/jsx-runtime",
    "plugin:jsdoc/recommended",
    "./.eslint-jscode.json",
    "./.eslint-react.json"
  ],

Enable plugin:react/jsx-runtime

Tools

https://javascript.plainenglish.io/5-essential-tips-to-improve-your-react-application-a17d540c920a

Prettier — best code formatter. It enforces a consistent style
Stylelint — powerful css linter that helps avoid errors and enforce conventions
CommitLint — a tool that keeps your commit messages in the conventional format
Husky + lint-staged — Husky gives you the ability to run code on git events (commits, pushed and etc). Lint-staged performs linting only on staged files instead of the entire codebase

Improve code

https://betterprogramming.pub/best-practices-i-wish-all-react-developers-knew-part-1-ff6cdee0666a

Move lists into separate components

Move nested functions
https://stackoverflow.com/a/46138370

Migrating from class component

https://dev.to/ayc0/migrating-class-components-to-hooks-49hf

Stop using “return null” in React

https://medium.com/@davidkelley87/stop-using-return-null-in-react-a2ebf08fc9cd

But the "return null" problem is wrong
https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

Modules

https://nicotsou.com/tltr-typescript-modules/

Sharing State Between Components

https://react.dev/learn/sharing-state-between-components

sample code

How to map import path https://github.com/taniarascia/takenote/blob/e0eddbb9a21ae4cf4c4c7c183f29cfd666e08331/tsconfig.json#L21