React JS: ({Hooks, Suspense&Lazy, Memo, context API, HOC,refs})

Photo by Artem Sapegin on Unsplash

A quick walk-through of the few important features in ReactJS

Hooks

Today in React we use class components and functional components. Hooks are written without classes. They let you use state and other React features without writing a class. Basic Hooks are : useState, useEffect, useContext. Additional hooks are: useReducer, useCallback, useMemo, useRef,useImperativehandle, useLayoutEffect, useDebugValue.

useState: This hook lets you keep local state within a functional component. The syntax is:

to set the state, the syntax is

useEffect: The useEffect runs after the first render() and after every update. So instead of using the traditional lifecycle methods, you can use the effect hook. The syntax is:

The second argument of useEffect is array, where we can provide the list of values to check before the execution. So the useEffect will only execute only if the value changes. if It's an empty array, then useEffect will execute only once.How do we unsubscribe from this listener when the component is unmounted? Well, useEffect allows for this. If you return a function within your effect function, it will be invoked when the component unmounts. This is the perfect place to cancel subscriptions

Some important rules :

  1. Call hooks, only at the Top Level — Don’t call hooks inside loops, nested functions or other conditions. They need to always be called at the top level of a React function. Thereby ensuring that the hooks are called in the same order every time a component renders.
  2. Only call hooks from React functions — Do not call hooks from regular JavaScript functions.

Check out the rest hooks here: https://reactjs.org/docs/hooks-reference.html

Suspense and Lazy

Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app. While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load. The best way to introduce code-splitting into your app is through the dynamic import()syntax.

When Webpack comes across this syntax, it automatically starts code-splitting your app. If you’re using Create React App, this is already configured for you and you can start using it immediately. The React.lazy function lets you render a dynamic import as a regular component.

This will automatically load the bundle containing the OtherComponent when this component gets rendered. If the module containing the OtherComponent is not yet loaded by the time MyComponentrenders, we must show some fallback content while we’re waiting for it to load - such as a loading indicator. This is done using the Suspense component.

More here: https://reactjs.org/docs/code-splitting.html

Memo

React.memo is a higher order component. It’s similar to React.PureComponent but for function components instead of classes. 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 memorizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.

More here:https://reactjs.org/docs/react-api.html

context API

It is actually a JS object(Not object, it can be number string etc) that can be passed between React Components without using props behind the scenes so to say so you can initialize as with any value you want

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.

A React component that subscribes to context changes.

HOC

A higher-order component is a function that takes a component as an argument and returns a component. A simple example which I always using is here :

The WithLoading is a function that takes a component called WrappedComponent as an argument. We can invoke the HOC as follows:

Do not use HOC’s in the render method of a component. Access the HOC outside the component definition. On the render function call the LoaderComponent as :

So this will show a loading icon until we have the prop isLoading changes to false.

refs

Refs provide a way to access DOM nodes or React elements created in the render method. Refs are created using React.createRef() and attached to React elements via the refattribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.

for accessing the refs, you can use:

Happy Reading!

A <>er

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store