Please enable JavaScript.
Coggle requires JavaScript to display documents.
React Advanced Guides (Higher-Order Components (Conventions (Pass…
React Advanced Guides
JSX In Depth
Props Default to "True". If you pass no value for a prop, it defaults to true
Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don’t care about them or to pass invalid HTML attributes to the DOM. Use this syntax sparingly.
-
Static Type Checking
-
-
TypeScript
programming language developed by Microsoft. It is a typed superset of JavaScript, and includes its own compiler.
Being a typed language, Typescript can catch errors and bugs at build time, long before your app goes live.
-
Reason - new syntax and toolchain powered by the battle-tested language OCaml. Developed by Facebook
-
Refs and the DOM
When to youse Refs
Managing focus, text selection, or media playback
-
-
-
-
The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted
-
Convert functional components to class components in order to user Ref as the first don't have instances
Uncontrlled Components
controlled components are recommended to implement forms. In a controlled component form data is handled by a React component. The alternative is a uncontrolled component where form data is handled by the DOM itself.
Instead of writing an event handler for every state update, you can use a ref to get from values from the DOM
In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.
Optimising Performance
-
-
Virtualise Long Lists: use technique called windowing. This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created
Avoid Reconciliation
When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM
-
Inherit from React.PureComponent in order to simplify the comparison for this.props.property and nextProps.property
-
-
-
React Without JSX
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don’t want to set up compilation in your build environment.
Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.
Reconciliation
Think of render() function as creating a tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.
heuristic O(n) algorithm
-
-
The developer can hint at which child elements may be stable across different renders with a key prop.
The Diffing Algorithm
When diffing two trees, React first compares the two root elements.
Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. When tearing down a tree, old DOM nodes are destroyed. Any state associated with the old tree is lost.
When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes
When a component updates, the instance stays the same, so that state is maintained across renders.
When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.
Context
Context API - used to pass data through the component tree without having to pass the props down manually at every level. It is NOT RECOMMENDED to use context in order to build a stable application as it is an experimental API.
-
Portals
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
It is important to remember, when working with portals, you’ll need to make sure to follow the proper accessibility guidelines.
Event Bubbling Through Portals - An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree
Error Boundaries
React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed
Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
-
A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info)
-
-
Higher-Order Components
An advanced technique in React for reusing component logic. HOCs are a pattern that emerges from React’s compositional nature.
-
a higher-order component transforms a component into another component opposed to a component transforming props into UI
-
a HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side-effects.
It works equally well with class and functional components. And because it’s a pure function, it’s composable with other HOCs, or even with itself
-
-
-
Code Splitting
-
Code Splitting
-
Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app
React Loadable wraps dynamic imports in a nice, React-friendly API for introducing code splitting into your app at a given component.
-
-