Modern
React

React Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

- React Documentation

If you ever find yourself needing to pass props down a few levels (no more than 5 or 6) and it is considered "global" data, Context may be right for you!

React Refs

Refs provide a way to access DOM nodes or React elements created in the render method.

- React Documentation

React && Vanillas JS DOM manipulation === 💩

React && jQuery DOM manipulation === 💩💩💩

React && React refs === 🌈🌈🌈

React refs should be used when you want to target or manipulate a DOM node

React memo

If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result..

- React Documentation

If you have a functional component that receives props, it will rerender even if the props are the same. Enter React.memo. This will do a shallow comparison to see if the props are the same. If they are, no rerendering.

React Lazy and Suspense

The React.lazy function lets you render a dynamic import as a regular component.

- React Documentation

Suspense is a component created by React that will display something until our other components are ready

Lazy and Suspense are often used together but don't have to be

React Hooks

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

- React Documentation

THE FUTURE IS NOW!