React Cheatsheet

react-cheatsheet.md

TypeScript

https://github.com/sw-yx/react-typescript-cheatsheet

Error Boundaries

Lifecycle method componentDidCatch() for catching every error in the component or subcomponent rendering In React <16 the UI stayed untouched when such an error happend But in React >=16 the Component is getting unmounted from the UI completely when there is no componentDidCatch() which results in a blank page

componentDidCatch receives 2 arguments:

• error - the error object that has been thrown
• info - contains the stacktrace

import sendToErrorReporting from './sendToErrorReporting'

class Foo extends Component {
  state = { hasError: false }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
    
    // send the error to a reporting service to investigate it
    sendToErrorReporting(error, info)
  }

  render() {
    if (this.state.hasError) {
      return <div>Sorry, something went wrong</div>
    }
    
    return (
      <div>
        <Bar baz="foo" />
      </div>
    )
  }
}

Reusable ErrorBoundary React Component

import sendToErrorReporting from './sendToErrorReporting'

class ErrorBoundary extends Component {
  state = { hasError: false }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
    
    // send the error to a reporting service to investigate it
    sendToErrorReporting(error, info)
  }

  render() {
    if (this.state.hasError) {
      return <div>Sorry, something went wrong</div>
    }
    
    return this.props.children
  }
}

Render multiple Elements without a wrapping Element

const Fruits = props => [
  <li key="1">Apple</li>,
  <li key="2">Banana</li>,
  <li key="3">Strawberry</li>
]

Helpful

dev-prod.js

export const isProd = process.env.NODE_ENV === 'production';
export const devAndProd = (dev, prod) => (isProd ? prod : dev);
export const isDev = !isProd;

Responsive Design with emotion

export const breakpoints = {
  large: 1030,
  medium: 850,
  phone: 450
};

export const smaller = width => `@media screen and (max-width: ${width}px)`;
export const smallerHeight = height => `@media screen and (max-height: ${height}px)`;
export const widerThan = width => `@media screen and (min-width: ${width}px)`;

export const isHorizontal = smaller(769);

export const Subtitle = emotion.div({
  fontSize: 25,
  fontWeight: 300,
  lineHeight: '40px',
  [smaller(950)]: {
    fontSize: 20
  },
  [smaller(breakpoints.medium)]: {
    fontSize: 18
  },
  [isHorizontal]: {
    fontSize: 18,
    lineHeight: '30px'
  }
});

zindex.js

export const ELEMENTS = {
  MENUBAR: 'menubar',
  COMPOSE: 'compose',
  OVERLAY: 'overlay',
  MAIN_SECTION: 'main-section',
  FOOTER: 'footer',
  CONTENT: 'content',
  DESERT: 'desert'
};

const order = [
  ELEMENTS.DESERT,
  ELEMENTS.MAIN_SECTION,
  ELEMENTS.FOOTER,
  ELEMENTS.CONTENT,
  ELEMENTS.OVERLAY,
  ELEMENTS.COMPOSE,
  ELEMENTS.MENUBAR
];

export const zIndexFor = (element, yolo) => ({ zIndex: yolo ? 999999 : order.indexOf(element) });

Usage of zindex.js with emotion

export const MainSection = emotion.div({
  position: 'relative',
  ...flex.vertical,
  width: '100%',
  minHeight: '100vh',
  flex: 1,
  ...zIndexFor(ELEMENTS.MAIN_SECTION)
});

Animation

react-pose https://popmotion.io/pose/ - "A truly simple animation library for React, React Native, and Vue"

Cancel state changes in useEffect e.g. by making async calls to an API

React.useEffect(() => {
  let didCancel = false
 
  // ...
  // you can check didCancel
  // before running any setState
  // ...
 
  return () => {
    didCancel = true
  };
});