• removing outlines from focused objects can mess up keyboard focus abilities
• htmlFor is the attribute that should be used for labels and corresponding inputs
• Programmatically set managing focus back to buttons when things like modals close using ref
• use jsx-a11y plugin for linting a11y specific issues
• test using an actual screen reader

• dynamic import syntax??
• Use React.lazy to dynamically import another component at render time
• React suspense can be used to show a place holder component until the component is loaded.
• Route based code splitting is a good rule of thumb
• React.lazy currently only supports default exports but you can work around it by using an intermediate module that re-exports it as default.

• Context lets you broadcast data that might need to be used by different components at different nesting levels. Examples of this are user roles, theme or caching specific data.
• Alternatives to Context are inversion of control, where the root component passes down the child component explicitly.
• Render props is another alternative to context.
• you can pass functions in the context to allow deeply nested components to change the context.
• don't directly pass in objects etc as this will cause a rerender on the provider component and force all childe components to re-render as well

• Error boundaries do not work for Event handlers, async code, SSR or errors in the error boundary itself.
• Error boundaries work like a JS catch block but for components
• The whole component tree is umounted when an unhandled exception is thrown in React, this is new in React 16.

• Ref forwarding is an opt-in feature that letes some components take a ref they receive, and pass it further down (in other words, "forward" it) to a child.
• You can use forwardRef in HoC's to pass the ref down to the correct component that needs it.
• You can also set the displayName property on forward ref so that devtools will display the name properly.

• Fragments allows the ability to return multiple elements without adding extra nodes to the DOM.
• You can use fragments in conjunction with map to return lists of items, pretty neat stuff!

• Mixins are no longer recommended
• Don't mutate the original component, use composition
• Pass unrelated props through to the wrapped component
• You can use hoistNonReactStatic to copy over static methods from the wrapped component.
• refs are not passed through as found out in the forward ref section.

• User defined components must be capitalized when used in jsx
• JSX types cannot be an expression

• Use React dev tools to tell if your site (or any other) is built with a production build.
• React dev tools has an Highlight Updates setting that let's you see what components are updating when interacting with your page. Really cool!
• React.PureComponent and React.memo can be used to help prevent unecessary renders.
• For obvious reasons do not mutate state directly and you should use immutable style to update state.

• Portals are used to render a child any where in the dom heirarchy, this is useful for children that need to break out of their parents dom nodes, like modals and tooltips.
• Even though a component is rendered in a portal it will still have the same context as it's parent and will bublle up events to it's parent.

• React will rebuild the entire component tree if the root node of that tree is changed to a different type.
• React will update attributes (if they have changed) if the DOM nodes have the same type.
• Same with the style attribute, it will only update the specific styles that have changed if the DOM nodes are the same.
• The key prop is provided to allow React to smartly render children lists, eg. it wont recreate children that already exist in the list and also exist after a DOM update.

• a render prop is a function prop that a component uses to know what to render.
• render props with HoC's are really easy to use.
• Using render props with React.PureComponent can cause performance issues as the shallow comparison will always sees it as a new function, even if they render the same thing.
• A workaround for the above issue is to make the render function an instance method that way it always points to the same method.

• You can enable strict mode on certain parts of your apps to see unsafe lifecycles and use of deprecated API's.
• Strict mode also double invokes constructor, render, setState and getDerivedStateFromProps methods to ensure they are idempotent. This is dev mode only, but it will throw a warning if it detects differences.

• Prop Types are only checked in dev mode for performance reasons.
• You can also add transorm-class-properties babel plugin to declare default props as a static property on the class itself.

• Suspense allows for defining a fallback component for things like lazy loaded components.

For example:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

• SSR allows for better SEO since the HTML is rendered server side.
• SSR is much faster when it comes to first meaningful paint.
• SSR can be slower when it comes to allowing a user to interact with the page vs CSR, but it seems only in specific cases.
• SSR can also be slower when in time to first byte since the server response also includes the rendered HTML, where as CSR just responds with a blank response and the JS scripts.
• There is no blank page flicker with CSR, though most CSR show a loading state instead.
• A common trend is to have specific pages like home or about-us to be SSR'ed for better performance and SEO compatibility.

• For generalized components just have them render children, this is called containment and is very useful.
• Combining props and composition makes inheritance pretty unecessary.