Breaking News: Grepper is joining You.com. Read the official announcement!

custom hook react

Add Answer

WinMaw answered on September 14, 2021 Popularity 10/10 Helpfulness 2/10

answer custom hook react

related React Custom Hooks

related Creating with the custom hook in react

related react hooks, react custom hooks

related Custom Hook

related using custom hook

related custom hooks

related React Custom Hooks

custom hook react

Comment

//helper>useFetch.jsx
import {useEffect,useState} from 'react'

const useFetch = (url) => {

    const [data,setData] = useState([])

    useEffect(()=>{
      fetch(url).then(res => res.json()).then(data => {
        setData(data);
      }).catch(e=>console.log(e.message));
    },[])
  
  return data
}

export default useFetch

//App.jsx
import useFetch from './helper/useFetch.jsx'
const App = () => {

  const data = useFetch('https://fakestoreapi.com/products')

  return (
    <div>
      {data.map(i => <p key={i.id}>{i.title}</p> )}
    </div>
  )
}

export default App

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: dynamic-data fetch hook javascript

Link to this answer
Share Copy Link

Contributed on Nov 13 2022

WinMaw

0 Answers Avg Quality 2/10

Closely Related Answers

React Custom Hooks

Comment

//useFetch.js
import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 24 2022

naly moslih

0 Answers Avg Quality 2/10

Creating with the custom hook in react

Comment

import { useState, useEffect } from "react";

const useWindowsWidth = () => {
    const [isScreenSmall, setIsScreenSmall] = useState(false);

    let checkScreenSize = () => {
        setIsScreenSmall(window.innerWidth < 700);
    };

    useEffect(() => {
        checkScreenSize();
        window.addEventListener("resize", checkScreenSize);

        //Cleanup
        return () => window.removeEventListener("resize", checkScreenSize);
    }, []);

    return isSreenSmall;
};

export default useWindowsWidth;

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: softhunt.net

Tags: hook

Link to this answer
Share Copy Link

Contributed on Apr 10 2022

Outrageous Ostrich

0 Answers Avg Quality 2/10

react hooks, react custom hooks

Comment

//Go to https://www.30secondsofcode.org/react/ for most commonly 
//used custom hooks and components

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 14 2021

Scary Snake

0 Answers Avg Quality 2/10

Custom Hook

Comment

function useLocalStorageState(
  key,
  defaulValue,
  { desirialize = JSON.parse, serialize = JSON.stringify } = {}
) {
  const [state, setState] = useState(() => {
    var keyInLocalStorage = window.localStorage.getItem(key);
    if (keyInLocalStorage) {
      try {
        return desirialize(keyInLocalStorage);
      } catch (error) {
        window.localStorage.removeItem(key);
      }
    }

    return typeof defaulValue == "function" ? defaulValue() : defaulValue;
  });

  const prevKeyRef = useRef(key);

  useEffect(() => {
    const prevKey = prevKeyRef.current;

    if (prevKey !== key) {
      window.localStorage.removeItem(prevKey);
    }

    prevKeyRef.current = key;

    window.localStorage.setItem(key, serialize(state));
  }, [key, state, serialize]);

  return [state, setState];
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: hook

Link to this answer
Share Copy Link

Contributed on Feb 01 2022

Inexpensive Impala

0 Answers Avg Quality 2/10

using custom hook

Comment

import { useEffect, useState } from "react";
import axios from "axios";
  
function useFetch(url) {
  const [data, setData] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  
  useEffect(() => {
    setLoading(true);
    axios
      .get(url)
      .then((response) => {
        setData(response.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [url]);
  
  const refetch = () => {
    setLoading(true);
    axios
      .get(url)
      .then((response) => {
        setData(response.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  };
  
  return { data, loading, error, refetch };
}
  
export default useFetch;

Popularity 10/10 Helpfulness 1/10 Language whatever

Source: www.geeksforgeeks.org

Tags: hook

Link to this answer
Share Copy Link

Contributed on Nov 05 2022

vaibhav ghule

0 Answers Avg Quality 2/10

custom hooks

Comment

import { useState, useEffect } from 'react'

// Custom hook for fetching data
function useFetch(url) {

  const [data, setData] = useState(null) // State for data
  const [loading, setLoading] = useState(true) // State for loading
  const [error, setError] = useState(null) // State for error handling

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true)
      setError(null)

      try {
        const response = await fetch(url)

        if (!response.ok) {
          throw new Error(`An error occurred: ${response.statusText}`)
        }

        const jsonData = await response.json()
        setData(jsonData)
      } catch (error) {
        setError(error.message)
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [url]) // Dependency array with url

  return { data, loading, error }
}

Popularity 2/10 Helpfulness 1/10 Language whatever

Source: dev.to

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Apr 17 2024

Benedetto Cattarinich

0 Answers Avg Quality 2/10

React Custom Hooks

Comment

//index.js
import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 24 2022

naly moslih

0 Answers Avg Quality 2/10

custom hook react

Contents

More Related Answers

custom hook react

Closely Related Answers

React Custom Hooks

Creating with the custom hook in react

react hooks, react custom hooks

Custom Hook

using custom hook

custom hooks

React Custom Hooks

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.