UX/FULLSTACKLE DEV

React snippets

Load SVG image vs. inline SVG

Inline SVG has the advantage of beeing accessible for CSS animation from React. Inline also loads faster. First the img way.

 import myIcon from './relative/path/to/icon.svg'

 // In render method.
 <img src={myIcon} alt="icon" />

 // ...now inline
 import { ReactComponent as MyIcon } from "./icon.svg"

 // In render method.
 <MyIcon /> // or...
 <MyIcon className="someClassThatWillBeUsedInCSS" alt="icon" />

Implement useState with useReducer

const [name, setName] = useReducer((_, value) => value, 'James')
;<input value={name} onChange={(e) => setName(e.target.value)} />

Manually Re-render a Component

const [, rerender] = useState()
rerender({})
//...or...
const [, rerender] = useReducer((x) => x + 1, 0)
rerender()

Pass a Function to use useState

const [count, setCount] = useState(0)
setCount((c) => c + 1)

// Example
const [count, setCount] = useState(0)
useEffect(() => {
  const id = setInterval(() => {
    setCount((c) => c + 1)
  }, 1000)
  return () => clearInterval(id)
}, [])

Define HTML Elements upon use

 const Button = ({ Component = 'button', ...props }) => <Component {...props} />

 <Button>A Button</Button> // Renders a button element
 <Button Component="a">A Link</Button> // Renders an anchor element

React Keys with Fragments

pokemons.map((pokemon) => (
  <React.Fragment key={pokemon}>
    <strong>Name: </strong>
    <span>{pokemon}</span>
  </React.Fragment>
))

Implicit create JSX Elements and nested elements

const element = // JSX
  React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      {
        className: 'greeting',
      },
      'Hello, world!'
    ),
    React.createElement('p', null, ' lalalalala ')
  )

Cancellable fetch and clean up in react

export default function User({ id }) {
  const [user, setUser] = useState(null)

  useEffect(() => {
    let controller = new AbortController()
    ;(async () => {
      try {
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/users/${id}`,
          {
            signal: controller.signal,
          }
        )
        setUser(await response.json())
        controller = null
      } catch (e) {
        // Handle the error
      }
    })()
    // clean up function
    return () => controller?.abort()
    // add a dependency array
  }, [id])

  return (
    <div>
      {user === null ? (
        <p>Loading user's data ...</p>
      ) : (
        <pre key={user.id}>{user.name}</pre>
      )}
    </div>
  )
}