React application doesnt rerender after state changes and logins

Question

I'm having some problems with my React application. It has a frontend using React with Typescript and a backend using Go. I fetch data from my backends database when a user wants to log in or somebody registers. The backend also uses the google books api to fetch some information on books. My site has a search bar which allows the user to look up a book by its title and other attributes. When the user clicks on search, my frontend makes a call to my backend api which in turns gets all the books that meet the users criteria and sends it to my frontend. The data is saved in a useState variable (Array). This is where I noticed my problem. When the data arrives, it is only rendered on the site if I click on another element on the site (for example a popup menu). Otherwise it will not be rendered.

This is the component that has the Searcharea.tsx in it: https://github.com/cihanbatasul/bookapi/blob/master/frontend/booksapi/src/views/Home.tsx

and this is the SearchArea component in which the call to the backend is made: https://github.com/cihanbatasul/bookapi/blob/master/frontend/booksapi/src/components/searcharea/SearchAreaNew.tsx

It renders

{dataLoaded !== false && (
        <SearchResults
          ref={ref}
          dataLoaded={dataLoaded}
          onOrderClick={handleOrder}
          onViewClick={handleViewClick}
          searchResults={searchResults}
        />
      )}

this when the dataLoaded variable is true. But even when

  const [searchResults, setSearchResults] = useState<VolumeInfoWithImages[]>(
    [],
  );

has all the found books in it, the results will not render until I click on an element that causes a rerender (such as a dropdown menu button). This problem also occurs when I log into our log out of my account (meaning the components and buttons which should only be visible to logged in users are still visible after logging out).

I tried everything I could but nothing helped.

Thank you in advance!

I tried to change the conditional rendering statement but none of the variations worked.

Answer 1

fetchUserData is async, so you should call it with await, at line 48.