React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In React world, things are changing and they are changing rapidly.

If you'd like to get up to speed in what new APIs React has to offer and have literally 7 minutes to spare - this is a collection for you!

A new way of doing code-splitting in React apps has been released in [React v16.6.0](https://reactjs.org/blog/2018/10/23/react-v-16-6.html). It allows us to use `Suspense` tag with dynamic `import` statements to send heavy components over the wire to the user when they are needed and not before.

In this example we are going to see how to use React.lazy and Suspense to avoid sending whole of lodash and moment JS libraries and instead do it once it's actually necessary.

Use React.lazy to do code-splitting with React Suspense

Class components can bail out from rendering when their input props are the same using `PureComponent` or `shouldComponentUpdate`. Since React 16.6 you can do the same with function components by wrapping them in [React.memo](https://reactjs.org/docs/react-api.html#reactmemo).

Use React.memo to avoid unnecessary re-renders in React functional components

Most React developers knows the pain of refactoring a functional component only because we would like to add a state to it.

In this lesson we are going to learn a new way of handling that - React 16.7 alpha introduces a concept of hooks, which allow us to well... hook into existing React features (such as state) from inside of a functional component. By using a `useState` hook we introduce state to a `Counter` component without introducing a class.

Add state to functional React component with useState hook without introducing a class

In this lesson we are going to learn how to use `useEffect` hook from React 16.7 to be able to create a custom hook which allows us to see how often the component mounts and unmounts. 

Later, we can reuse it in other components and improve app performance by diving deep into how many times our components are mounted and/or unmounted. 

Learn React lazy, memo, useState and useEffect in 7 minutes

Tomasz Łakomy

Course Content