Lumping together React hooks

Ai — Thu, 21 Oct 2021 08:17:04 +0000

This week at TTS, my class is learning about React hooks. One assignemnt involved watching PedroTech's react hooks course video and writing about three hooks.

This article is a "wrapper" around that assignment. I'll actually discuss all 10 prebuilt hooks albeit at a shallow level. Please let me know if I got anything wrong.

`useState()`, `useMemo()`, and `useReducer()`

Track state and signal DOM renders.

📝 useState() signals a render whenever its state changes. Use this be default.

📝 useMemo() signals a render based on other state dependencies you pass it. Use this when you want to memoize expensive calculations.

📝 useCallback() signals a render based on component-level dependencies. Also use this to memoize expensive calculations.

📝 useReducer() provides an API for arbitrary state-render interactions, e.g. update both state x and y when state z changes. Use this for "complicated" state-render interactions and when scaling your app is a primary concern.

`useEffect()` and `useLayoutEffect()`

Track depencies and signal "side-effects" that don't necessarily affect the DOM.

📝 useEffect() activates after virtual DOM updates and DOM renders. Use this by default.

📝 useLayoutEffect() activates after virtual DOM updates but before DOM renders. Use this when you want to "measure" DOM properties before render.

`useContext()`

📝 useContext() provides API for passing props down the component tree.

`useRef()` and `useImperativeHandle()`

📝 useRef() tracks real DOM elements. Use this to focus on input fields.

📝 useImperativeHandle() provides an API for exporting the useRef() reference to other components. Use this when your input is spread across multiple components.

`useDebugValue()`

📝 useDebugValue() provides an API for labeling custom hooks in the console output. Use this when creating a complicated custom hook.

Conclusion

React hooks are probably difficult to "learn" in isolation because they likely make more sense in a concrete React app. Moreover, it seems like its more important to learn an efficient and effective workflow using many different hooks to accomplish a particular task rather than just "learning" an individual React hook.

📑 Evan You's talk at dotJS 2019 provides great context for why we even have hooks in React as well as similar ideas in other libraries/frameworks like Vue and Svelte.

Banner source: 🎥 いしわたり淳治＆砂原良徳＋やくしまるえつこ「神様のいうとおり」（2010）

Article source: 🐙🐱 Ai-Yukino/dev.to

React + Vite quick start

Ai — Wed, 20 Oct 2021 17:15:23 +0000

I convinced my class at Tech Talent South to use Vite instead of create-react-app. These are some notes I wrote to help my instructor, TA, and classmates start using Vite.

Single command quick start (Windows)

(These instructions may work for non-Windows computers, but it didn't work for at least one of my classmates who used Linux. You can always look at the official Vite documentation for more details.)

Run

npm init vite@latest my-vue-app -- --template react

Navigate to your project and install dependencies via

cd my-vue-app
npm i

Run your app with

npm run dev

For more info, check out the docs or Evan You's 14 minute demo video.

Multiple command quick start

Run

npm init vite@latest

and select the options you want.

Links

📝 Docs

🎥 Demo video

👥 Why ES modules?

Notes

👀Replacing `create-react-app` with Vite👀

Tips:

Use .jsx files instead of .js files unless you're writing pure JavaScript.

Banner source: 🎥 きゅうくらりん / いよわ feat.可不（Kyu-kurarin / Iyowa feat.Kafu）

Article source: 🐙🐱 Ai-Yukino/dev.to

DEV Community: Ai

Lumping together React hooks

useState(), useMemo(), and useReducer()

useEffect() and useLayoutEffect()

useContext()

useRef() and useImperativeHandle()

useDebugValue()