ReactJS - The important parts

ReactJS has been in the web development industry for a long time now and for people who have been using react for a long time and need some quick overview of what the library has to offer is covered here. This is kind of a reference guide about the important conceps of ReactJS. I am assuming you have some prior knowledge on ReactJS.

Topics Covered

  1. React Components & Pure React Components
  2. Context
  3. Higher Order Component
  4. Memo
  5. Error Boundaries
  6. Fragments
  7. Suspense
  8. Hooks

React Components & Pure React Components

The difference between React Components and Pure React Components is that pure react components will give you the same HTML content as output while rendered when you give the same props and state to it no matter how many times you execute it.
Extend the following classes offered by React to create the corresponding component types.

Context

Generally data is transferred between parent component to child component using the props. But certain props are common to many components which makes it difficult to pass the same props again and again to many child components. These common data include things like localisation information, theme information and so on.
To share this data to multiple child components without using props we use the React context. Generally we use context to share data which is termed to be Global data.

Higher Order Component(HOC)

HOC are pure functions. Pure functions are functions that does not alter the input parameters and produces the same result for the same set of inputs. HOC are not really a React feature but rather a design pattern used more commonly with ReactJS.

Memo

React.memo is similar to React.PureComponents but React.memo is used for functional components instead of class based components.
React.memo is a HOC function. So a HOC function wrapped under React.memo will have its output memoized. So it will return the cached result for the same set of inputs. React.memo will handle only prop changes. If the component has state changes then it will be rerendered.

Error Boundaries

Prior to React 16 errors in component caused the whole component tree to loose its state and broke the whole application. There was no way to gracefully handle these errors in the component level.
React 16 introduced Error boundaries to handle these error cases. ErrorBoundary component are React components that catches any errors happening in its child components and instead of breaking the whole application will display a fallback UI when an error occurs.
A react component will become an ErrorBoundary component when it implements any one of the following methods or both of them
1. static getDerivedStateFromError()
This method is used to render a fallback UI when an error occurs in the child components.

Fragments

Prior to React 16 if you have a array of items generated for a given data and you want to return them you would wrap them under a single DOM element and return it since the render() method allows only one element to be returned.
React.Fragment was introduced to overcome this caveat. So enclosing your array of items generated as children of React.Fragment will allow you to return the elements without creating an extra DOM element. The short form to express React.Fragment is

Suspense

Suspense allows you to wait for something to happen. Suspense has only one use case in ReactJS as of now. To load the components dynamically using React.lazy(). React.lazy takes a promise as its input which should resolve to a React component.

Hooks

Hooks are introduced in React 16 and are considered a big deal. They are functions that allow you to use React state and other lifecycle features of React without writing classes in Javascript that extend React.Component or React.PureComponent.

The important built in hooks provided by React are as follows
1. State Hook — useState()
This is used to create local state withing the function component. You can call useState() multiple times to create multiple local state variables. The initial values of each of these local state variables are used only during the initial render. Subsequent render uses the saved state values.
useState() returns two values one is the initial state value and the other a function to change this state’s value.

Senior Software Engineer — Frontend @Freshworks.