📑 SyntheticEvent

• if the interaction with SyntheticEvent is delayed (e.g. via setTimeout) it will be cleared and the .target.value reference will no longer be valid.

const hanldeChange = (evt) => {
	/**
	 * This is a simple implementation of a "debounce" function,
	 * which will queue an expression to be called in 250ms and
	 * cancel any pending queued expressions. This way we can
	 * delay the call 250ms after the user has stoped typing.
	 */
	clearTimeout(this.timeout);
	this.timeout = setTimeout(() => {
		this.setState({ search: evt.target.value });
	}, 250);
};

📑 state

• global store: createContext/useContext + useReducer
• local (localStorage, sessionStorage)
• redux / mobx

📑 test

• jest
• mocha / chai
• selenium, cypress: a complete end-to-end testing experience.

📑 Async/Await vs Promise chain

1. Scope:

   • in a promise, only the promise chain is asynchronous — doesn’t block the execution;
   • with async/await the entire wrapper function is asynchronous.

2. Logic:

   • in a promise, synchronous work can be handled in the same callback, and multiple promises can be handled using Promise.all;
   • with async/await the synchronous work needs to be placed outside the callback, and multiple promises can be handled with more simple variables

3. Error handling:

   • Promises: then, catch, finally;
   • Async/await: try, catch, finally

📑 mutable vs immutable

• Primitive data types such as numbers, strings, and Booleans are immutable
• objects and arrays are mutable

dependencies

• reacthook-form
• dayjs /date-fns
• bit.dev, material-ui
• react-router-dom

📑 Event loop/propagation

• web workers
• capturing, bubbling
• react.new
• create-react-app: remove serviceProvider
• react-icons
• usehooks.com