title: Prevent render before useEffect with search params
body: <p>I have a component <code>Browse</code> that used to display search result requested from <code>SearchBar</code> component.</p>
  <ol>
  <li>First search query when <code>results</code> state is <code>null</code></li>
  <li>Found some tracks now <code>results</code> state have array of tracks in</li>
  <li>I make another search but changing the filter type from <code>By Tracks</code> to <code>By Users</code> (The results should have array of users objects)</li>
  <li>I got an error because the render was called before the initResults() function so the results has always array of tracks object inside so I got error of undefined property</li>
  </ol>
  <p>The output when I search for the first time :</p>
  <pre><code>&gt; init useEffect
  &gt; render
  </code></pre>
  <p>The output when I searched another time inside the Browse Component :</p>
  <pre><code>&gt; render
  &gt; init useEffect
  </code></pre>
  <p>How can I refresh the useEffect when search params change
  Any idea ? Thank's !</p>
  <p><strong>Browse.js</strong></p>
  <pre><code>export default function Browse() {
  const [results, setResults] = UseSafeState(null)
  const [isLoading, setIsLoading] = UseSafeState(true)
  
  const location = useLocation()
  const searchParams = new URLSearchParams(location.search)
  
  const search = searchParams.get('search')
  const identifierFilter = searchParams.get('identifier_filter')
  
  const initResults = () =&gt; {
      setIsLoading(true)
  
      SearchAPI.search(search, identifierFilter)
          .then((response) =&gt; {
              setResults(response.data)
              setIsLoading(false)
          })
          .catch((error) =&gt; {
              setResults(null)
              setIsLoading(false)
          })
  }
  
  const renderTrackBrowse = () =&gt; {
      return results.map((result, key) =&gt; &lt;div key={key}&gt;{result.track.name}&lt;/div&gt;)
  }
  
  const renderUserBrowse = () =&gt; {
      return results.map((result, key) =&gt; &lt;div key={key}&gt;{result.user.username}&lt;/div&gt;)
  }
  
  const renderPage = () =&gt; {
      console.log('render')
      
      switch (identifierFilter) {
          case FiltersTypesSearchBar.TRACKS.name:
              return renderTrackBrowse()
          case FiltersTypesSearchBar.ARTIST_NAME.name:
              return renderUserBrowse()
          default:
      }
  }
  
  useEffect(() =&gt; {
      console.log('init useEffect')
      initResults()
  }, [location, search, identifierFilter])
  
  return &lt;div className=&quot;main double-contained browse&quot;&gt;{isLoading ? &lt;Loader /&gt; : renderPage()}&lt;/div&gt;
  }
  </code></pre>