title: Multiple filters with React Hook - Chaining function
body: <p>Hello I have created a search bar with a multipl filter, it works but the functions are too dependent on each other. The problem here is that the functions are handling multiple cases.
  would it be possible to lighten each function by chaining them and how ? I don't really get chaining method.
  thanks</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import Search from "./Search";
  import Anime from "./Anime";
  import "./App.css";
  
  const KIJAN_API_URL = "https://api.jikan.moe/v3/top/anime/1/upcoming";
  const App = () =&gt; {
    const [animes, setAnimes] = useState([]);
    const [sortedAnimes, setSortedAnimes] = useState([]);
    const [searchValue, setSearchValue] = useState("")
    const [filterByType, setFilterByType] = useState("");
    const [filterByYear, setFilterByYear] = useState("");
  
    useEffect(() =&gt; {
      fetch(KIJAN_API_URL)
        .then(response =&gt; {
          if (response.ok) {
            return response.json();
          } else {
            throw new Error("Something went wrong");
          }
        })
        .then(jsonResponse =&gt; {
          setAnimes(jsonResponse.top);
        })
        .catch(error =&gt; {
          console.log(error);
        });
    }, []);
  
    useEffect(() =&gt; {
  
      const callFilterByType = result =&gt; {
        if (filterByType === "") {
          callFilterByYear(result);
          console.log(result);
        } else {
          result = result.filter(anime =&gt; anime.type === filterByType);
          callFilterByYear(result);
          console.log(result);
        }
      };
  
      const callFilterByYear = result =&gt; {
        if (filterByYear === "") {
          setSortedAnimes(result);
        } else {
          const regex = new RegExp(`${filterByYear}`, "gi");
          result = result.filter(anime =&gt; regex.test(anime.start_date));
          setSortedAnimes(result);
          console.log(result);
        }
      };
  
      if (searchValue === "") {
        callFilterByType(animes);
      } else {
        const regex = new RegExp(`${searchValue}`, "gi");
        console.log("search : ", searchValue);
        const result = animes.filter(anime =&gt; regex.test(anime.title));
        callFilterByType(result);
        console.log(result);
      }
  
  
    }, [searchValue, animes, filterByType, filterByYear]);
  
    return (
      &lt;div className="App"&gt;
        &lt;Search
          searchValue={searchValue}
          setSearchValue={setSearchValue}
          filterByType={filterByType}
          setFilterByType={setFilterByType}
          filterByYear={filterByYear}
          setFilterByYear={setFilterByYear}
        /&gt;
        {sortedAnimes.length &gt; 0 ? (
          sortedAnimes.map((anime, index) =&gt; {
            return &lt;Anime key={index} anime={anime} /&gt;;
          })
        ) : (
          &lt;span&gt;Aucune correspondance&lt;/span&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>