React Note

Use local storage

• @2021-09-23
• Inspired by usehooks
• used: usehooks-ts, website
• didn't use: react-storage-hooks with advanced usage, for not-syncing problem.
• didn't use: react-use-storage-state, low popularity.
• didn't use: @rehooks/local-storage, I don't like the API names.

Using Hooks

• @2021-10-13
• Calling useSelector, even for unused var, will cause a render.
• Customized hook cannot pass status, unless other status hooks like useLocalStorage(), useContext() are called.
• @2021-10-18
• Using setState for a JSX.Element might cause a long execution time, hence cause a memory leak.

CRA dotenv

• @2021-12-29
• CRA can use .env files to do most things instead of eject. https://create-react-app.dev/docs/advanced-configuration/
• CRA can use multiple .env files see Adding Custom Environment Variables | Create React App
• Maybe should save secrets to .env and dev setting files to .env.development

CRA polyfill

• @2021-12-29
• use CRA rewired
• polyfill check facebook/create-react-app#11756
• for process/browser error, yarn add process.

Full height page

• @2022-01-06
• Add style={height: '100%'} to the root <div> in public/index.html.
• Example on StackOverflow
• search keywords: 100vh, 100% height,

ESlint overriding in CRA

• @2022-01-18
• Put a .eslintrc.js file in project root folder and use VSCode ESlint extension.
• Enable ESlint for tsx files.
• Configure ESLint to parse .ts and .tsx as Typescript and .js and .jsx as Ecmascript