React Fundamentals

[coryhouse]

React Fundamentals

• Y Combinator when React was first introduced - Summary, many were skeptical!
• React, the Good Parts
• React = Lego
• Why JS is eating HTML - Summary: React provides a declarative API that helps assure invalid (out of sync) conditions can't occur. Without React, it's your job to keep the HTML and JS data in sync.
• Why is React great? Because it changed how we think about applications. We now write apps by defining: “when the data looks like A, the app should look like B”, and “when the user does X, change the data like Y”. We no longer have to write brittle code like: “when the user does X, update these DOM elements to look like B”. In jQuery, we had to manually keep the DOM and state and in sync.
• Learn React in 10 tweets
• A (mostly) Complete Guide to React's Rendering Behavior
• Why React?
• History timeline
• 5 Topics to learn before React
• React developer roadmap - Also see this one
• Components are concerns, not tech. Also here.
• Think legos
• Library vs framework

JSX

• JSX - The Other Side of the Coin
• React without JSX - call React.createElement.
• React components return UI descriptor objects
• JSX can be assigned to a variable
• Code in curly braces is left alone. (interpolation). This allows you to dynamically inject variables into props and children. Interpolation must be JavaScript expressions because they're essentially the right hand of an object assignment or used as an argument to a function call.
• String literals
• Props default true
• Spread attributes
• Booleans, null, undefined are ignored
• Conditionals
• Logic-less JSX
• Virtual DOM
• Props
• Conditionals in render - Many options
  • Ternary
  • Logical &&, || in render
  • Multiple return/return early

State

• It's async. setState calls are batched. Why? No matter how many setState() calls in how many components you do inside a React event handler, they will produce only a single re-render at the end of the event. This is crucial for good performance in large applications because if Child and Parent each call setState() when handling a click event, you don't want to re-render the Child twice.
• An example of state being async. Note that alert shows value that was "closed over" when the button was clicked, not the current value in state.
• To avoid needless re-renders, avoid calling setState when data hasn't changed (or use shouldComponentUpdate)
• Approaches for handling state in an immutable manner (or use Immer)
• Accepts object or function. Functional setState receives prevState and props as params.
• Accepts callback as 2nd param (but recommended to use componentDidUpdate instead)
• Why treat state immutable?
• Tips for using state correctly
• Four immutable approaches
• Where to put React state (flowchart)

Forms

• Controlled vs Uncontrolled components.
• Simple uncontrolled form using "the platform" (caveat, no custom client-side valiation)
• Example of fast uncontrolled form
• Put state inside each form field to improve perf on large forms

Functional components

• The good parts
• The bad parts
• Each render gets its own copy of nested functions. State values from that render are "closed" over. Demo of "captured" values
• Handling events

Class Components

• Lifecycle methods
• createClass and Class components
• Lifecycle methods Chart
• Handy concise descriptions in React Cheatsheet
• Lifecycle methods visualized
  • componentWillMount
  • componentDidMount
  • componentWillReceiveProps -> getDerivedStateFromProps
• Binding Patterns - 5 Ways to handle the this keyword
  • Avoid arrow functions and bind in render

Typechecking

• Typechecking via PropTypes
  • Centralizing declarations
  • Declaring shapes
  • PropTypes vs TypeScript and Flow. - Here's a solid comparison of TS and Flow with React And here's an example of a React component using Flow
  • TypeScript annotations on plain JS

Props

• Default props
• Destructuring props
• Using Rest with props
• children prop
• Setting initial state using a prop
• Passing components as props
• Slot pattern
• All the props fundamentals

Keys

• Keys
  • Use when iterating arrays
  • Use on master/detail - Here's a good example
  • Use to "reset"/create new instance
• React inline styles and alternatives

Hooks

• Why Hooks?
• Visual comparison of class vs hooks code - Thinking in React Hooks
• Hooks considered harmful - Covers how closures give functions state, how react-is determines if the dep array has changed, properly specifying dependency array.
• Old componentDidMount/unmount code refactored to hooks
• Short summary of each Hook's use by Tyler McGinnis
• Summary of each Hook's use on StackOverflow
• useState or useReducer to handle state - Prefer useReducer to protect state
• Codesandbox with examples of each Hook
• Mental model: Each render has its own everything
• Dan's hook intro post
• Simple Hooks example
• Sunil's Hooks before and after image
• Using async/await in useEffect
• useState supports the functional form too - useful in useEffect to avoid listing state in the dependency array
• Boilerplate for every data fetch call: 41mins here - Here's a pic of the spot Contrast with UseEffect to see how much simpler it is and how it unifies these concerns.
• Do I need to specify functions as effect dependencies or not? Options, in order of preference:
  • Hoist functions that don’t need props or state outside of your component
  • Declare functions that useEffect calls within the effect. Then it's clear what useEffect depends upon, and you don't have to declare other deps in the dependency array. It helps avoid missing dependencies in the dep array.
  • If after that your effect still ends up using functions in the render scope (including function from props), wrap them into useCallback where they’re defined, and repeat the process. Why does it matter? Functions can “see” values from props and state — so they participate in the data flow.
  • Need to call the func from multiple effects? Extract it outside the func if possible. If that's not possible, use useCallback - that way the function is only recreated when its dependencies change (useCallback accepts a dep array too).
• useState pitfalls and how to fix them
• When to prefer useState?
  • Simple state (numbers, ints, strings), and logic with simple state transitions
  • No interest in unit testing state (for instance, if you prefer testing the component via tools like Cypress instead of its internals)
  • No need to pass multiple callbacks deep down the tree
  • Tip: Group data that changes together in a single useState call
  • If state updates together, use a single useState object. If they update separately, consider separate useState calls.
• Why prefer useReducer? blog post on this
  • It separates reads from writes
  • With useState, you have to remember to use the function form to reliably set state based on current state. With useReducer, you can't mess this up. It's designed for updating values based upon previous state. Related post
  • Easy to test in isolation, since it's a pure function
  • Centralizes state writes, which is often easier to understand
  • Typically simplifies useEffect by radically simplifying the dependency array and nested logic as shown here
  • Easily handle related state (though admittedly you can also use objects with useState to compose data that changes together)
  • Can easily store entire state tree in localStorage
  • Can pass dispatch down to avoid passing many callback funcs on props
  • Can easily log all actions since they're centralized
  • Makes the component easier to digest by moving state management concerns to a separate file
  • You can pass an array for the action on useReducer to reduce boilerplate
  • Tip: Instead of useState, can do this: const [state, update] = useReducer((_, next) => next, initial);. Then can refactor to more robust logic easily. Otherwise, works like useState.
  • Think of useReducer as the “cheat mode” of Hooks. You can decouple the update logic from describing what happened. This helps remove unnecessary dependencies from effects and avoids re-running them more often than necessary.
• How hooks correspond to lifecycle methods
• You can't use async keyword on useEffect. Instead, extract it to a separate function. This isn't a tech limitation. It's a deliberate design decision by the React team so you can cancel handling the async call if the component unmounts before it returns.
• Eliminate dependencies by using functional setState in useEffect, or when setting a state variable depends on the current value of another state variable, you might want to try replacing them both with useReducer. When you find yourself writing setSomething(something => ...), it’s a good time to consider using a reducer instead. A reducer lets you decouple expressing the “actions” that happened in your component from how the state updates in response to them.
• Avoid race conditions and memory leaks using AbortController in useEffect. Another example, linked in React docs: https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect
• You may omit dispatch, setState, and useRef container values from the deps because React guarantees them to be static. But it also doesn’t hurt to specify them.
• Implement lifecycle methods using hooks
• Visual diagrams for how to think about Hooks and why they shouldn't be set in conditionals
• useEvent explained in a tweet: https://twitter.com/Huxpro/status/1522273995801776129
• useTransition is for low priority updates. Returns startTransition and pending. The returned startTransition says "This has a lower priority than other state updates". Typing into an input field should feel instant, so to support that, mark other state updates as low priority (via startTransition as needed. A filtering demo that shows that using useTransition for a filter term means the input stays responsive while the list update lags slightly behind
• useDeferredValue is like useTransition because it's also for low priority updates, but it's useful when the value is coming in "from above"/on props. (so, when your component doesn't have control over the setState call - perhaps a third party lib or package too). Note: You need to use memoization on the component to get any benefit. And the memoization value obviously shouldn't change too often or the benefit disappears.

useReducer tips: (below are from redux's style guide, but relevant)

• Do Not Mutate State
• Reducers Must Not Have Side Effects
• Model Actions as Events, not Setters

useEffect Best practices

• tkdodo Tips for simplifying useEffect
• useEffect is taught too much / too early. It's much more important to teach ways to avoid useEffect: derived state, single source of truth for state, react keys, callback refs, useSyncExternalStore even... know about them and you likely will not need useEffect.
• WARNING: Almost none of the effects I see in app codebases are syncing with something outside of React. It's always: if prop change, update state, if state changes, dispatch another action, or if state changes, compute something and put in another state. All of these are bad.
  • useEffect is the reduce of hooks. You can do anything with it. You probably shouldn't be using it. There are better abstractions.
  • useEffect runs after render
    • For useEffect, the question is not "when does this effect run" the question is "with which state does this effect synchronize with"
  • Common Pitfalls: Keep dep array as small as possible, use the ESLint hook, profile your app before optimizing
  • Prefer primitives in dependency arrays
  • useEffect is a last resort. It's for synchronizing with external systems.
  • State transitions trigger effects. Effects go in event handlers. Use event handlers to handle actions.
  • Prefer primitives in dep array
  • Avoid using to sync state that can be derived
  • Render as you fetch via suspense.
  • Consider modeling effects with state machines

Component Composition

• Component composition
  • props.children
  • Specialization

Error handling

• Catch errors via Error Boundaries - Note: React 16 unmounts the app on error, so it's critical to add at least a top level error boundary to your app.
  • How many? Identify the feature boundaries in your application and put your error boundaries there. Sections that are visually independent are likely independent features which are exactly where you want your error boundaries.
  • Ask: If this component was to crash, should its siblings also crash?
  • Break things on purpose by throwing errors to see what happens.

Best practices

• 9 Common beginner mistakes
• The 8 Key React Component Decisions
• React component code smells
• Common mistakes
  • More from Elijah Manor and this gist
• Nice summary of fundamentals: react-from-zero

Quiz

1. How does JSX differ from HTML?
2. Is JSX required?
3. What tool compiles JSX?
4. What method is required on all class components?
5. What is a lifecycle method? Can you name one?
6. What is destructuring? Why do we do it? Contrast object destructuring with array destructuring.
7. Why prefer const/let over var?
8. What tool did we use to create our React app?
9. What Hooks did we use? What were they for?
10. Do lifecycle methods exist in function components?
11. What tool is checking our code quality/standards and checking our code for common errors and issues?
12. How do we declare data that changes over time?
13. What’s the term for passing config settings into a component?
14. How do we declare what values our component accepts?
15. When do you declare a key? Why declare a key? What’s a good key? What’s a bad key?
16. How do you run an npm script?
17. Why is client-side routing preferable to server-side?
18. How do you make a function public?
19. How do arrow functions differ from regular functions?
20. How do you copy an object in JS? Is it deep or shallow?
21. When does React re-render?
22. How do you declare state in a class? A function?
23. What tool are we using to automatically format our code?
24. What does JSX compile down to?
25. What tool are we using for our mock API? How did we configure it?
26. How did we automate starting our app and API at the same time?
27. What array method did we use to iterate over the list of users? What does it return?
28. What is a predicate?
29. What is a higher order function? List some higher order functions on the array prototype.
30. How do you copy an object in JS? Is it deep, or shallow?
31. What is a wildcard import? When is it useful?
32. What are the benefits and downsides of using a default export?
33. Does const make an object immutable?
34. Name 2 ways to declare a React component. Which should you prefer?
35. What is the current version of JS? How often are new versions released?
36. When is the rest operator useful?
37. What’s the name for arguments passed to React components?
38. How do we specify the types for each argument?
39. How did we debug?
40. What hook did we use to run code after render?
41. What’s a promise? How do we handle a successful promise?
42. How do we handle an error from a promise?
43. When you copy an object in JS, is it deep or shallow? What’s the difference?
44. Why is client-side routing preferable to server-side?
45. Is the code we see in the browser what’s actually running?