Enterprise App Development

Hooks Vision for Future

At React Conf 2018, Hooks was introduced by Sophie Alpert and Dan Abramov, followed by Ryan Florence demonstrating how to refactor an application to use them. While giving his presentation, Ryan stated that hooks are the vision for the future.

According to React, “Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.” To explain this further, hooks are a backwards-compatible function that allows you to ‘hook into’ react state and lifecycle from a function component without having to depend on

There are three different types of hooks. We discuss these below:

useState

useState is the simplest Hook that you can use. It does exactly what you would expect from its name. All you have to do is declare a variable (state) and a function, that is also called setter and this sets the value of that variable.

useRef

Sometimes, while coding, you may want to store a value for future reference in your component, but without triggering a re-render. This is a situation where useRef is used. It allows you to store a variable in the scope of the function, while still preserving its value across the renders. useRef receives an initial value and returns the ref variable.

In fact, useRef is a special case of useState. However, it allows you to set its value directly instead of using a setter function, which persists the value across renders without triggering a re-render.

useEffect

The useEffecthook may be tricky for you to understand if you think too much of it in terms of the old React class lifecycles. Although its subtleties are not immediate, they do make sense.

For example, if you have a component that fetches data in the form of a list by hitting an API, you would want the component to hit the API and fetch the data list once the component is rendered (mounted).

What are the benefits of Hooks?

Below, we list out several benefits of using React Hooks:

  • No rewrites to include or exclude state, just adding/deleting lines
  • No need to memorize lifecycle methods with useEffects
  • Customizable and reusable across components unlike class component state
  • Much cleaner code
  • No breaking changes

Put simply, React Hooks allows you to “hook into” React specific functionality such as its state and lifecycles, while also letting you keep your functional components as functions. It is not difficult to understand why it has so much potential.

Facebook Comments

Get In Touch

Ask Us Anything !

Do you have experience in building apps and software?

What technologies do you use to develop apps and software?

How do you guys handle off-shore projects?

What about post delivery support?