package.json "scripts": { "prettier": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'", "lint": "eslint --fix . --ext js --ext jsx", "format": "eslint --fix . --ext js --ext jsx && prettier --write --ignore-path .g…

useEffect(() => { setTimeout(() => { // preload const img = new Image(); img.src = image; // setLoaded to true on load and display image img.onload = () => { setLoaded(true); }; }, (idx + 1) * 300); }, []); ... loaded ? ( // display image )

this is a note on what goes on when a component renders and re-renders notes are from watching React Render Tutorial - YouTube Rendering has 2 phases: Initial Render: Render phase: -start at root -goes down leaf components -use createEleme…

import React, { createContext, Dispatch, useContext, useReducer } from "react" const hogeData = {}; export const HogeContext = createContext<any>(hogeData) export const HogeDispatchContext = createContext<Dispatch<any>>(() => { }) export const HogeContextPro</dispatch<any></any>…

event.target.value.match(/^[A-Za-z0-9]+$/)

var newArray = array.reduce(function(result, hoge) { if (some condition) { result.push(hoge); } return result; }, []); or var newArray = array.filter(function(hoge) { if (some condition) { return hoge; } });

import React, { useRef, useEffect } from "react"; export default SomeFunctionComponent(props) { const elementRef = useRef(null); useEffect(() => { function handleOutsideClick(event) { if (ref.current && !ref.current.contains(event.target))…