Java Script - React native

What is React Hooks and how to use Hooks Methods

React Hooks, Type of react hooks, How many React Hooks Methods And How to use we learn all there.

React Hook?

Hooks are a new feature which is implemented in React 16.8. We have use state and other React features without writing a class. It mainly uses to handle the state and class lifecycle in react functional component. Functional component is a state less so make this a stateful functions use Hooks. Hooks don’t use inside class component. React provides a few built-in Hooks like – UseState, UseEffect, useMemo, useRef, UseCallBack, useContext.

Why React Hook?

In a function component of you want to add some state to it, Then first you converting it to a class component. So we can do this by using Hooks to use function component as a class component.

Rules of Hooks

  • Hooks cannot be conditional
  • Hooks cannot work in React Class Components
  • Hooks call only at the Top Level
  • Hooks Don’t call inside block like loops, conditions, or nested functions.
  • Hooks only called from React Functions component

1. React useState Hook

useState is a Hook use in function components for add React state.

Importing useState (To use UseState React Hooks)

To use Hooks like useState, we need to import and initialise it, you can import it from react like this:

import { useState } from "react";

Initializing useState

You can initialize state like this:

import { useState } from "react";
const Student = () => {
    const [name, setName] = useState('')
};

useState takes three parameter like state name, function to update state value and initial state value. State names are just like variables, hence you can name them anything you like. 

Reading a state

We can read states just like sate name variables:

import { useState } from "react";
const Student = () => {
    const [name, setName] = useState('')
    return <Text>My name is {name}</Text>
};

Updating a state

To update state we use the sate function that will returns to update state, in this case: setName. State can be updated like this:

import { useState } from "react";
const Student = () => {
    const [name, setName] = useState('')
    setName('xyz')
    return <Text>My name is {name}</Text>
};

What can state hold?

State can hold any value like normal variables it can store any datatype like strings, numbers, booleans, arrays, objects, objects in arrays, arrays in objects. For example:

import { useState } from "react";
const Student = () => {
    const [data, setData] = useState({
        name: 'xyz',
        age: 21,
        class:8
    })
    return <Text>My name is {data.name} and class is {data.class}</Text>
};

Updating Objects and Arrays in State

import { useState } from "react";
const Student = () => {
  const [data, setData] = useState({
    name: 'xyz',
    age: 21,
    class:8
  })
  return <>
    return <Text>My name is {data.name} and class is {data.class}</Text>
    <Button onClick={() => setData({ ...data, name: 'abc' })}>Click    Me</Button>
</>
};

export default Student;

2. Use of useEffect (use Effect React Hooks)

useEffect Hook in functional component work like componentDidMount, componentDidUpdate, and componentWillUnmount combined. By default, useEffect runs both after the first render and after every update.

useEffect accepts two arguments. The second one is optional. 

Runs on every render:

import { useState, useEffect } from "react";
function Student() {
  const [count, setCount] = useState(0);
  useEffect(() => {
      setCount((count) => count + 1);
    
  });
    return <Text>Total count is {count}</Text>
}
export default Student;

Runs on first render:

import { useState, useEffect } from "react";
function Student() {
  const [count, setCount] = useState(0);
  useEffect(() => {
      setCount((count) => count + 1);
  }, []);
    return <Text>Total count is {count}</Text>
}
export default Student;

Runs when data changes:

import { useState, useEffect } from "react";
function Student() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState([]);
  const handleChange = (e) => {
    setData(e.target.value)
  }

  useEffect(() => {
    setCount((count) => count + 1);
  }, [data]); // Only re-run the effect if data changes

  return (
    <>
<Button onClick={() => setData([ ...data, name: {
        name: 'xyz',
        age: 21,
        class:8
    } ])}>Add new Student</Button></>
      <Text>Total count is {count}</Text>
    </>
  );
}

export default Student;
Visited 10 times, 1 visit(s) today

Leave a Reply

Your email address will not be published. Required fields are marked *