Custom hooks react

Hello everyone,

Im currently learning react and having trouble with custom hooks. Im using openweatherAPI for practice. I wanted to create custom hook to reorganize fetched value so its easier to access. I created a function which is working as intended but I want to use it as custom hook since I want to use it multiple times.

App.js

import React, {useState, useEffect} from 'react';
import { useFilter } from "./useFilter";
import './App.css';

function App() {

  const [weather, setWeather] = useState([]);
  const [query, setQuery] = useState("");
  const [searchValue, setSearchValue] = useState("");
  const [filteredArray, setArray] = useFilter([]);

  useEffect(() => {
    if(query !== ""){
      fetchCall();
    }
  },[query]);
  
  const fetchCall = async () =>{
    const request = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${query}&appid=${APP_KEY}&units=metric`);
    const response = await request.json();
    setArray(response.list);
    console.log(filteredArray);
  }

  const search = (e) =>{
    setSearchValue(e.target.value);
  }

  const submitValue = e =>{
    e.preventDefault();
    setQuery(searchValue);
  }

  return (
    <div className="App">
      <form onSubmit={submitValue}>
        <input type="text" placeholder="enter city name" onChange={search}></input>
        <button type="submit">getWeather</button>
      </form>
    </div>
  );
}

export default App;

hook that I created

import {useState} from 'react';

export const useFilter = response =>{

    console.log(response);

    const [value, setValue] = useState(response);

    return [value, response => {
        const getDtText = (value) =>{
            return value.split('').slice(0,10).join('');
          }
      
          let fiveDaysArray = [];
          let tempArr = [];
          let tempVal = response[0];
          tempVal = getDtText(tempVal.dt_txt);
      
          response.map( result => {   
      
            if(getDtText(result.dt_txt) !== tempVal){
      
              fiveDaysArray.push(tempArr);
              tempArr = [];
              tempVal = getDtText(result.dt_txt);
              tempArr.push(result);
      
      
            }else{
              tempArr.push(result);
            }
      
          })
      
          return(fiveDaysArray);
    }];

}

Problem is; when I sent response here:

setArray(response.list);

and console.log(response) in useFilter component it retrieves empty array. Also useFilter triggers everytime i type something in input and two times on page load. Can anyone please, help me to understand what im doing wrong and maybe point me in right direction with creating custom hooks?

Thanks in advance.

I’m not sure I understand the syntax in the hook. Are you trying to return an array with the value returned from a function?

Usually, you would return data and if needed a function out of the hook. Also, why are value and response used as they are if they are the same value, why do you need useState if you are not going to use the setter function?

This looks more like a utility function than a hook to me, but maybe I’m missing something?


https://www.youtube.com/results?search_query=Custom+Hooks