luismartinezs

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset -->

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" />

luismartinezs

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist -->

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">

luismartinezs

<!-- Use <caption> -->
<!-- Use scopes (enough for most cases) or ids and headers -->

<!-- Example with scopes -->

<table>
  <caption>
    Color names and values
  </caption>
  <tbody>

luismartinezs

// https://medium.com/@seanmcp/%EF%B8%8F-how-to-use-emojis-in-react-d23bbf608bf7
import React from 'react';

const Emoji = props => (
    <span
        className="emoji"
        role="img"
        aria-label={props.label ? props.label : ""}
        aria-hidden={props.label ? "false" : "true"}
    >

luismartinezs

// https://reactjs.org/docs/accessibility.html
import React from 'react';

function ListItem({ item }) {
  return (
    // https://reactjs.org/docs/fragments.html
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>

luismartinezs

// https://blog.thoughtspile.tech/2021/10/13/really-declarative/
import React, { useRef, useEffect, useCallback, useState } from 'react';

function useImperativeTimeout(callback, delay) {
  const timeoutId = useRef(null);
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;

luismartinezs

// https://overreacted.io/making-setinterval-declarative-with-react-hooks/
import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function Counter() {
  const [count, setCount] = useState(0);
  const [delay, setDelay] = useState(1000);

  useInterval(() => {
    // Your custom logic here

luismartinezs

// https://blog.thoughtspile.tech/2021/04/07/better-usecallback/

const useStableCallback = (callback) => {
  const onChangeInner = useRef(callback);
  // Added useLayoutEffect here, to work with concurrency
  // Because of this, it can't be used during render, only after render
  useLayoutEffect(() => {
      onChangeInner.current = callback;
  });
  const stable = useCallback((...args) => onChangeInner.current(...args), []);

luismartinezs

export interface IWidthWrapperProps {
  children: React.ReactNode;
  className?: string;
  width?: "text" | "block";
}

luismartinezs

import React from "react";

import { Provider } from "react-redux";

import { store } from "./store";

function App() {
  return (
    <React.StrictMode>
      <Provider store={store}>{/* App content */}</Provider>