title: React filter by category feature
body: <p>Hello I am building photo gallery where I would like to add feature that user will be able filter by Category. I tried some solutions but there are two bugs that I am not able to fix. First is that if I go to the GalleryPage (using Swtich) it does NOT render dynamically added buttons from FilterButton component. I have to click one more time on the link and then it DOES render the buttons. I dont know why it does not work on the first render.</p>
  <p>Other issue is that I am able to filter by category but it causes the infinite loop in the useEffect and I dont know how to fix it.</p>
  <p>I have got GalleryPage component where I am getting data from API and parsing the data for using later in other components. Here it seems that is all working fine.</p>
  <pre><code>const GalleryPage = () =&gt; {
      const url = 'someurl';
      const [data, setData] = useState([]);
      const [categoryList, setCategoryList] = useState([]);
      const [category, setCategory] = useState('All');
  
      useEffect(() =&gt; {
          const fetchData = async () =&gt; {
              const result = await axios(url,);
              setData(result.data)
              result.data.forEach(item =&gt; {
                  imageUrl.push(item.image)
                  if (categoryList.indexOf(item.group) === -1) { 
                        categoryList.push(item.group)
                  }
              })
           }
           fetchData();
           }, [])       
  
      return (
         &lt;FilterButton setCategory={setCategory} categoryList={categoryList}/&gt;
         &lt;Gallery data={data} category={category}/&gt;
      )
  }
  </code></pre>
  <p>If I go to the GalleryPage the h3 and 'All' button is rendered. But I have to click on the link one more time to render the buttons inside the map function:</p>
  <pre><code>const FilterButton = ({setCategory, categoryList}) =&gt; {
      return(
          &lt;h3&gt;Gallery&lt;/h3&gt;
          &lt;button onClick={()=&gt; setCategory('All')}&gt;All&lt;/button&gt;
          {categoryList.map(item =&gt; (
             &lt;button key={item} onClick={()=&gt; setCategory(item)}&gt;{item}&lt;/button&gt;
          ))}
       )
  
  };
  
  export default FilterButton;
  </code></pre>
  <p>And here I am not able to fix the infinite loop:</p>
  <pre><code>const Gallery = ({data, category}) =&gt; {
      const [photos, setPhotos] = useState([]);
      
      useEffect(()=&gt;{
          let temp = []
          if (category === 'All'){
              setPhotos(data)          
          }else{
              data.map(item =&gt; {
                 temp.push(item)
              })
          }
          setPhotos(temp)
      }) 
      return(
         photos.map((item =&gt; 
             &lt;img key={item.id} src={item.image}/&gt;
         ))
      )
  };
  
  export default Gallery;
  </code></pre>
  <p>If I add empty array to the useEffect it does not work at all. Also I am using styled components and framer motion but it should not have affect on this I hope.</p>