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.

1. React.Component
2. React.PureComponent

The main difference between the two is that React.PureComponent implements shouldComponentUpdate which shallowly compares your state & props while doing a rerender so avoid using PureComponents if your props and state are complex datastructures. Using the React.PureComponent will give you a slight performance gain. But make sure all you child component of your pure components are also pure components. Or else you should use forceUpdate() method to update the child components.

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.

HOC are pure functions that take a component as input and some optional params specific to the use case and produces another component.

The main use case of HOC are when you have some components that have same set of behaviour but differing in only certain aspects. These behaviour which differs are sent as params to the HOC functions. Some common things to follow while using HOC functions are
1. Don’t mutate the original component. Since HOC are supposed to be pure functions and moreover the mutated component cannot be used separately.
2. Only pass relevant props to the component that is getting wrapped by the HOC.
3. Make sure you can compose one HOC function with another as much as possible for easy extendability.

There are also some caveats while using HOC like you must copy your static properties and functions over to the HOC returned component, React references will not be available in the wrapped component and so on.

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.

2. componentDidCatch()
This method is used to log the error occured and to do any additional operations on the error object.

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.

React.Suspense component takes the lazy loaded component given by React.lazy as its children. It can take multiple components returned by React.lazy as its children.

React.Suspense component takes a fallback prop that takes a React component as its value which will be rendered until the lazy loaded components are loaded by the browser.

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.

2. Effect Hook — useEffect()
Actions like dataFetching, subscription of events, direct DOM manupulation are called as side effects in React. These side effect actions are usually done in React lifecycle methods such as componentDidMount(), componentDidUpdate(), componentWillUnmount(). Effect hooks are an equivalent of these lifecycle methods for functional components. So the useEffect() will take a function as its parameter which will be called post rendering of the component.

3. Context Hook — useContext()
useContext() method takes an React context as a parameter and returns the context’s current value. A component using useContext() will rerender when the context value changes even if the parent component is using memoisation(React.memo) or implements shouldComponentUpdate() method.

There are other built in hooks as well. Apart from these inbuild hooks you can write your own hooks as well.

Thank you. Hope this is useful.