React Hooks and its Advantages

gokulmathew — Sun, 28 Jun 2020 17:58:44 +0000

React Hooks :
React hooks are functions that let you hook into react state and life-cycle features from function components. React provides built-in hooks like useState, useEffect, useReducer, useRef, useCallback, useContext, useMemo and you can also create you own custom hooks.

React hooks are available from react version of 16.8. Before the introduction of hooks, state can be maintained only in class component not in functional component, after the introduction of hooks, state can be maintained in functional component also.

Advantages of react hooks over class component :
The main advantage of react hooks is the re-usability of stateful logic. It can be done with the help of custom hooks. Without changing component hierarchy, you can reuse stateful logic and it is easy to share custom hooks with other components.

In react class component, we split our work in different life-cycle methods like componentDidMount, componentDidUpdate and componentWillUnmount, but in hooks, we can do everything in a single hook called useEffect.

In class component, we have to use this keyword and also we have to bind event listeners, which increases complexity. This is prevented in react functional components.

React class components don’t minify very well, and they make hot reloading flaky and unreliable.

React hooks are easier to test and work with, makes the code look cleaner, easier to read and has less number of lines of code.

useState Hook :
useState hook is used to add state to a functional component.

In the above snippet, the initial value of the blogName state variable is ‘React’. Using setBlogName setter function, you can change the value of the blogName state variable.

useEffect Hook :
In class component , when the document title has to be based on counter state value, and when the document title has to updated whenever the counter value changes, we use the following code.

In the above code snippet, the codes inside componentDidMount and componentDidUpdate are relatable, but they are written in two different methods. To overcome this, we can use useEffect hook.

The above useEffect hook gets executed after every component render and whenever the count changes, it will be executed again. You can have multiple useEffect hooks in a single component, where you write relatable code inside each.

Custom Hooks :
Custom hooks is a easy way to re-use stateful logic in react hooks.

The above snippet is an example of a custom form hook, it accepts the initial value as props and sends the initial value, setter function and reset function.

You can import useInput custom hook in your component and you can use it in your component like this.

Conclusion :
React hooks don’t replace your knowledge of react concepts. Instead, hooks provide a more direct way to use react concepts which you already know.

In future, hooks will be mostly used, and will get good support from react team.

What is React JS

gokulmathew — Sun, 07 Jun 2020 11:12:05 +0000

A Brief story behind React:
React is a Java Script library developed by Facebook . It is used to create appealing UI and UX in websites and web applications.
React helps you develop Single Page Applications, website or web application that dynamically rewrites the data in the web page with the new data it receives from the web server instead of reloading the entire web page.

How React works ?
Generally HTML code of a web page gets converted to Document Object Model (DOM), and it is rendered as a web page by the web browser.
React creates a virtual DOM from the actual DOM at first, and displays it to us. Whenever a change is made in the actual DOM, React compares virtual DOM with the actual DOM. And, updates the change in the virtual DOM.
React uses JSX to write HTML code. The JSX code will be transcompiled to Javascript before the browser renders.

Why choose React?
Uses Virtual DOM. So it renders very fast.
Easy to learn, supports code re-usability.
“Learn once, write anywhere library ”. React is the heart of React Native. React Native is a mobile application framework, and react native apps are supported by both iOS and Android.
Not only SEO friendly, but also backed by a strong community, Facebook and Instagram development teams.

Quick Summary
The main idea behind React is to build large-scale SPA with data that changes repeatedly over time, and tackles the challenges.
Provides developers with the capability of working with a virtual DOM, much faster and user-friendly. Also, offers easier creation of interactive UIs, JSX support, component-based structure and much more.

DEV Community: gokulmathew

React Hooks and its Advantages

What is React JS