UI Study - React 18

[kurtzace]

React 18

course1

Concurrent features:

1. <Suspense fallback={<div>Loading...</div>}><div>UI...</div> </Suspense>, lifecycle with useTransition
2. SuspenseList
3. Hook useDefferedValue for stale UI

import { useTransition, useState } from 'react'; function App() { } const [isPending, startTransition] = useTransition(); const [someState, setSomeState] = useState(); const someEvent = (event) => { } startTransition (() => { }); setSomeState(event.target.value); return <SlowComponent value={someState} />;

[kurtzace]

react test

React test utils

• showRender
• renderIntoDocument `
• findRendered DOMComponentWithTag
• scryRenderedDOMComponents With Tag
• Simulate Clicks Keypresses Etc.`

[kurtzace]

pkellner/pluralsight-using-hooks-in-react18

Sapling to view React component tree

useEffect(() => { return () => {} }, [])

Basic Hooks useState, useEffect, useContext Additional Hooks useReducer, useCallback, useMemo, useRef, uselmperativeHandle, useLayoutEffect, useDebugValue, useDeferredValue, useTransition, useld Library Hooks useSyncExternalStore, uselnsertionEffect

const [state, dispatch] = useReducer (reducer, initialArg, init); reducer: A function that takes in 2 parameters, state and action and returns a new state. initialArg: The starting value of state. init: A function that returns the starting state

const imgRef = useRef();
return (
<div className="container">
<img src="/images/Speaker-1124.jpg"
ref={imgRef}
style={{ filter: "grayscale (100%)" }} onMouseOver={() => {
}}
imgRef.current.style.filter = "grayscale (0%)";|
/>

usecontext usage image

[kurtzace]

State options

• context : user, theme, internationalization

3rd party: redux, mobx, recoil

Remote: react query, swr, relay/Apollo

Webstore: local, session , index db

Local state

Lifted state

Derived : length of array

Refs : dom, uncontrolled components, non react libs , hold timer, track of component is mounted, store prev state value, undo ,redo

Url