Please enable JavaScript.

Coggle requires JavaScript to display documents.

React - Advanced Guides (APIs (Refs and the DOM (API (Callback refs…

- - - - String refs
        
        Deprecated
      - Callback refs
        
        Inline callbacks would be called twice
        
        First with null and then with the underlying element
        
        Can be avoided by using a bound method
        
        A callback function passed to a child element's ref attribute
        
        Receives a DOM node or a component instance as a parameter when the child element is mounted
        
        Receives null as a parameter when the child element is unmounted
        
        Updates happen before componentDidMount or componentDidUpdate
        
        Can be passed between components like ref objects
      - React.createRef()
        
        Ref objects can be attached to child elements via their ref attribute
        
        Returns a ref object
      - Refs objects
        
        current property
        
        Assigned null when the parent component is unmounted
        
        References the underlying DOM node or the mounted instance of the child component when the parent component is mounted
        
        Updates happen before componentDidMount or componentDidUpdate
      - Ref attribute
        
        Can be passed a ref object created using React.createRef() or a callback function
    - - Function components
        
        It's not possible to access a function component via a ref
      - Exposing DOM refs to parent components
        
        forwardRef()
        
        Not recommended unless required since this pattern breaks component encapsulation
        
        Can be used in conjunction with useImperativeHandle
        
        :red_flag: findDOMNode
        
        Can be utilised when no access to the child component is available
        
        Deprecated in StrictMode
    - - Provides access to DOM nodes and React element instances
      - Allows for imperatively modifying child elements outside of the prop-based React dataflow
      - Should be avoided when something can be achieved declaratively
  - - - Allows for passing data through a component tree without having to explicitly pass individual props down
      - Useful when some global data is used by many components at different nesting levels
      - Component composition
        
        Passing a component down
        
        Decouples a child from its immediate parents
        
        :bulb: Inversion of control
        
        Render props can be used for parent-child communication
        
        Avoids having to pass individual props down to initialise a specific component
        
        May be a better alternative when only having to pass some props down
    - - React.createContext
        
        Returns a context object
        
        defaultValue argument
        
        Only used when a component doesn't have a matching provider above it
        
        Helpful for testing components in isolation without wrapping them
        
        Passing undefined as a provider value would not force defaultValue to be used
        
        Consumers of the context object would read the current value from the closest matching Provider
      - Context.Provider
        
        React component supplied by every context object
        
        Takes a value prop
        
        All descendant consumers would rerender when value changes
        
        :red_flag: Re-rendering cannot be overridden by shouldComponentUpdate
        
        :link: Values are compared using the same algorithm as Object.is
        
        Compared using reference identity
        
        Values created inside render methods may trigger re-rendering of consumers if the parent of provider re-renders
        
        Can be avoided by moving the value to component state
        
        Passed to descended consumer components
        
        Nested providers of the same type can be used to override values
        
        One provider can be connected to multiple consumers
      - Class.contextType
        
        Static property on a class
        
        :link: Class fields
        
        Can be assigned a context object
        
        this.context would expose the nearest current value of that context type
        
        Can only be used to subscribe to one context type
      - Context.Consumer
        
        React component that subscribes to context changes
        
        Takes a function as a child
        
        Should return a React element
        
        Injected a value prop that is equal to the value prop of the closest provider of its context type
        
        Can be used by function components to access context
      - Context.displayName
        
        String property
        
        Sets the display name of Context.Provider and Context.Consumer components of the context type in React DevTools
    - - Updating context from consumer components
        
        Achieved by passing an update function as part of the context value
      - Consuming multiple contexts
        
        Achieved by nesting a component in multiple Context.Consumer components of different context objects
        
        Consider a render prop if multiple context values are often used together
  - - - Component name in React DevTools
        
        Render function passed to React.forwardRef()
        
        Named function
        
        ForwardRef(name)
        
        Setting the displayName property of the function
        
        ForwardRef(displayName)
        
        Anonymous function
        
        ForwardRef
      - Higher-order components
        
        ref like the key prop is not passed through with other props
        
        A ref passed to a higher-order component would refer to the outermost container and not to the wrapped component
        
        Container component (defined using React.forwardRef()) should pass their ref parameter as a regular prop to the wrapped component
    - - Allows passing a ref through a component to one of its children
    - - React.forwardRef()
        
        Takes a render function as an argument
        
        props and ref parameters are injected to the render function
        
        Any refs passed to the component from the parent would be available through the ref parameter to the receiving component
  - - - Allows for rendering children into a DOM node outside the hierarchy of the parent
      - Useful for rendering child elements that are visually separate from the parent element
    - - ReactDOM.createPortal(child, container)
        
        child
        
        Any React element
        
        container
        
        A specific DOM element
    - - Event bubbling and React context still works as if the children are rendered inside the parent
  - - - Allows for rendering multiple child nodes without introducing new DOM nodes
    - - React.Fragment
        
        React component
        
        Currently supports only the key attribute
      - <> and </>
        
        Doesn't supports keys and attributes
- - - - Value attribute is maintained by React
      - Use defaultValue and defaultChecked
    - - Always uncontrolled
      - Value cannot be set programmatically
- - - - Elements of different type produce different trees
      - Developer would provide a key prop to manage sibling elements
  - - - Different types
        
        Tear down the old tree
        
        Build the new tree from scratch
        
        DOM nodes are destroyed and inserted
        
        Relevant component lifecycle methods are called
        
        Components are unmounted and remounted
        
        Any state is lost
      - DOM elements of same type
        
        Updates only the changed attributes
        
        Retains the same node
        
        Updates only the changed styles
        
        Recursively handles the children
      - Component elements of the same type
        
        State is retained as the component instance is the same
        
        Updates the props of the underlying component
        
        render() method is called and algorithm recurses
        
        Relevant component lifecycle methods are called
    - - Iterates over both lists and mutate when a change is detected
      - Use the key prop to match the elements in the two trees
    - - A subtree that has moved out of its parent would be re-rendered
      - Subtrees of different component types would be re-rendered
        
        If two components have similar output, consider making them one type
      - Keys should be stable, predictable, and unique
        
        Unstable keys lead to loss of state and performance degradation
        
        Math.random() produces unstable keys
- - - - Higher-order components
        
        Passing the input component to the container component through a render prop
      - :red_flag: React.PureComponent
        
        Value of the render prop would change in each render if the render prop is created inside the render method
        
        Render prop should be defined as an instance method
    - - :link: A function prop that returns a React element
      - Allows for sharing state or behaviour that one component encapsulates with other components
    - - Reusable component
        
        Should accept a function-typed prop
        
        Should call the prop with relevant state in its output
      - Consumer component
        
        Should take its input as props
  - - - A function that takes a component as input and returns a new component
      - Components vs higher-order components
        
        Components transform props to UI
        
        Higher-order components transform components to other components
      - A pure function with no side-effects
    - - Composes the input component
        
        Input component is not mutated
        
        Many HOCs can augment the same component without their functionality clashing
        
        Component can be used on its own
        
        Input component interface is not altered
        
        Extraneous props are passed through
        
        Contract between the two components is prop-based
        
        Set a displayName on the container component
        
        WithService(Component)
      - Accepts an input component along with any other parameters
      - :bulb: Composability
        
        Prefer a higher-order function that returns a HOC over a HOC that takes additional parameters
        
        Functions with the same output and input types are easily composed together
        
        :red_flag: Allows HOCs to be used with third-party composition utilities and as decorators
    - - Handling cross-cutting concerns
        
        A HOC can be used to reuse code that affect multiple components
      - Avoid creating HOCs inside render()
        
        A new HOC would be created on each render
        
        Causes the subtree of the HOC to remount and lose its state
      - Static methods should be copied
        
        Known static methods of the input component should be manually copied to the HOC
        
        Consider exporting static methods separately
      - Refs aren't passed
        
        Use React.forwardRef()
- - - - Diffing render outputs
        
        Components produce a tree of React elements
        
        Transforming one tree to another has a complexity of O(n^3) where n is the number of elements
        
        UI should be updated based on the new and old element trees
      - React uses a heuristic algorithm
        
        O(n)
        
        Makes two assumptions
        
        Elements of different type produce different trees
        
        Stable elements would be hinted at by a special key prop
    - - Root elements with different types
        
        The old tree is torn down and a new tree is built
        
        DOM nodes
        
        Old nodes are destroyed
        
        New nodes are inserted
        
        Component instances
        
        componentWillUnmount() called on unmounted components
        
        componentDidMount are called on mounted components
        
        State associated with the tree is lost
      - DOM elements of the same type
      - Components of the same type