React Js noting summary

Overview#

Hooks#

• useState
• useEffect
• useContext
• useCallback: basically cache the function, not the result of function.
• useMemo: cache the result of the function, not the function itself.
• useRef: Use with or without forwardRef
• useLayoutEffect: Prefer using classic useEffect, only use this if we have reasonable circumstance. This behavior just like a synchronous version of useEffect, therefore, blocking visual could be appear.
• useReducer: An alternatively complex version of useState, that instead of update value directly, it make use of dispatch style. Only prefer for complex logic process.
• useImperativeHandle: using with forwardRef to expose some method from the child component to exposed on the ref itself.
• useDebugValue: not using so much.

Setup#

General#

• IDE: VSCode
• Make sure install yarn first. We would use yarn all the way instead of npm.
• Install Eslint and Prettier extensions.

{
  "eslint.run": "onSave",
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ],
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

{
  "css.lint.unknownAtRules": "ignore",
  "scss.lint.unknownAtRules": "ignore",
}

Create React App#

yarn create react-app [app-name] --template typescript # create template, using typescript
yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev
yarn add husky lint-staged --dev
npx husky install # initialize husky
npx husky add .husky/pre-commit "yarn lint-staged" # config before commit, run lint stage with all commit file. (also depend on lint-staged command in package.json file)

Explainations#

• eslint: prefer install per project for explicit insists that the current project make use and depend on eslint. Make sure installing eslint extension for VsCode first.
• prettier: prefer install per project for explicit insists that the current project make use and depend on prettier. Make sure installing prettier extension for VsCode first.
• @typescript-eslint/eslint-plugin: eslint plugin.
• @typescript-eslint/parser: eslint parser for typescript.
• eslint-config-prettier: prettier config for eslint, to avoid setting conflict.
• eslint-plugin-prettier: prettier plugin for eslint.
• eslint-plugin-react: react plugin for eslint.
• eslint-plugin-react-hooks: react-hook plugin for eslint.
• eslint-plugin-jsx-a11y: Static AST checker for accessibility rules on JSX elements.

Example Files#

• .eslintignore
• .eslintrc.js
• .prettierignore
• .prettierrc
• tsconfig.json

Create Next App#

yarn create next-app [Your App name] --ts
# eslint was added with ts template
yarn add prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev
yarn add husky --dev
yarn husky install
yarn husky add .husky/pre-commit "yarn lint-staged"
yarn add lint-staged --dev
# Add [lint-staged.config.js] file as config can be found in corresponding folder

Example Files#

• .eslintignore
• .eslintrc.json
• .prettierignore
• .prettierrc
• tsconfig.json
• lint-staged.config.js

Tip and Trick#

Import node module in Typescript without type definitions#

• Make a file call decs.d.ts in root folder.
• Declare missing type definition modules there: declare module '[yourModule]';
• Include that file in tsconfig.json, include section.
• Done, import as normal (no intellisense support!).

testing-library

"jest": {
    "resetMocks": false
  }