React Js

— what is react js?

react is a front-end javascript library that allows developers to implement UI, based on components. react was initially released in 2013 by facebook. It is an open-source platform since 2015. react is widely used to build interactive and complex web and mobile applications.

In React it doesn’t uses a real DOM instead react uses a virtual DOM which makes DOM manipulation easy. React does server-side rendering and it has unidirectional data flow.

— Hooks in react

React introduced hooks in react version 16.8. Before that developers used life cycle methods to manipulate the state, for example, there are life cycle methods like componentDidMount,componentWillMount, etc…

By using react hooks developers can manipulate state and other features without writing a class. also, issues in life cycle methods like repeated code have been eliminated. React hooks can’t be used inside a class.to use hooks there should be a functional component. React hooks allows writing clean and maintainable code in an easy way.useState hook and useEffect hook are used widely in software development so let’s discuss more about them

— useState() Hook

By using the useState hook it allows having state variables in functional components.useState() accepts a value for the initial state and returns two variables to get the current state and to update the current state. These two variables can be exposed by array restructuring.

fig 1:Defining useState hook

in the above example, the count variable has the value of the current state, and the setCount variable can update the current state.

fig 2:updating count variable using setCount()

— useEffect() Hook

using the useEffect hook developers can perform side effects in the components.useEffect hook executes each time when the component is rendered. some examples that can archive by using the useEffect hook are fetching data, timers, updating the DOM, etc… This hook accepts two arguments. The first one is a function and it is called the effect. the second argument is an array of dependencies which is optional. Now let’s see an example of fetching data using the useEffect hook.

fig 3:fetching data using useEffect()