Pyrolistical

export default (db) => {
  return {
    async findDisqualifiedPlayers(teamID) {
      return db.collection('playerDisqualifications').find({
        teamID
      })
        .toArray();
    },
    async checkInTeam(teamID) {
      return db.collection('checkIns').insert({

Pyrolistical

export default (db) => {
  return {
    async checkIn(teamID) {
      const disqualifiedPlayers = await db.collection('playerDisqualifications').find({
        teamID
      })
        .toArray();
      if (disqualifiedPlayers.length > 0) {
        throw new Error('cannot check-in with disqualified players');
      }

Pyrolistical

import {createContext, useContext} from 'react';

const LocaleContext = createContext();

export const ProvideLocale = Locale.Provider;

export const useLocale = () => {
  const locale = useContext(LocaleContext);
  return locale;
};

Pyrolistical

// React.memo caches the functional component if all the props are triple equals ===
const Increment = React.memo(({ caller, onClick }) => {
  console.log(`${caller} button rendered`);
  return <button onClick={onClick}>Increment</button>;
});

const BadComponent = () => {
  const [count, setCount] = useState(0);
  // declared functions never triple equals ===, even if its the same code
  // ie. (() => {}) === (() => {}) is false,

Pyrolistical

// BAD
const LocaleContext = React.createContext();
const OverrideLocaleContext = React.createContext()

const App = () => {
  const [locale, setLocale] = useState('english');
  return <LocaleContext.Provider value={locale}>
    <Navigation />
  </LocaleContext.Provider>;
};

Pyrolistical

// BAD
export default ({ count }) => {
  const Label = () => {
    return <code>{count}</code>;
  };
  
  return <Label />;
};

Pyrolistical

// BEFORE
const App = () => {
  const [locale, setLocale] = useState('english');
  return <Navigation locale={locale} />;
};

const Navigation = ({ locale }) => {
  return <Link locale={locale} href="/about">About</Link>;
};

Pyrolistical

// Good useMemo usage
const NormalComponent = ({ count }) => {
  const costlyValue = useMemo(() => costlyFunction(count), [count]);
  return <p>NormalComponent {costlyValue}</p>;
};

export default ({ count }) => {
  // Slow component
  const SlowComponent = () => {
    const costlyValue = costlyFunction(count);

Pyrolistical

const BrokenComponent = (props) => {
  useEffect(() => {
    console.log('BrokenComponent called useEffect');
  }, [props]); // THIS IS ALWAYS WRONG!

  return <code>{JSON.stringify(props)}</code>;
};

const GoodComponent = (props) => {
  useEffect(() => {

Pyrolistical

// BEFORE
const [costlyValue, setCostlyValue] = setState();

useEffect(() => {
  setCostlyValue(computedCostlyValue(props.someParam));
}, [props.someParam]);


// AFTER
const costlyValue = useMemo(() => computedCostlyValue(props.someParam), [props.someParam]);