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

React Custom Hooks

Add Answer

naly moslih answered on September 14, 2021 Popularity 10/10 Helpfulness 4/10

answer React Custom Hooks

related Creating with the custom hook in react

related react hooks, react custom hooks

related Custom Hook

related custom hook react

related using custom hook

related React Custom Hooks

related how to make custom hooks

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 react-custom-hooks

Link to this answer
Share Copy Link

Contributed on May 24 2022

naly moslih

0 Answers Avg Quality 2/10

Closely Related Answers

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

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 dynamic-da

Link to this answer
Share Copy Link

Contributed on Nov 13 2022

WinMaw

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

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

how to make custom hooks

Comment

-1

// utils/useCopyToClipboard.js
import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard() {}

Popularity 9/10 Helpfulness 1/10 Language whatever

Source: www.freecodecamp.org

Tags: whatever whateve

Link to this answer
Share Copy Link

Contributed on Dec 05 2022

Sharlu R

0 Answers Avg Quality 2/10

React Custom Hooks

Contents

More Related Answers

React Custom Hooks

Closely Related Answers

Creating with the custom hook in react

react hooks, react custom hooks

Custom Hook

custom hook react

using custom hook

React Custom Hooks

how to make custom hooks

Grepper

Documentation

Social

Legal

Contact

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