Conditional rendering with useEffect()
I once had this footer navbar that needs to be hidden on some pages and visible on others, one way to solve this was to play with z-index and render the new page over the navbar, but that just didn't feel right.
So useEffect(), here's how:
In the App component (common parent of Navbar and NavbarHiddenPage) I manage a state toggleNavbarVisibility, as a prop I pass value of state to Navbar, and likewise the setVisibility function to NavbarHiddenPage.
In the Navbar component I add styles based on the visibility state
And in the NavbarHiddenPage, I call useEffect() and in there I set the visibility to false, here's the trick, the function useEffect takes returns a clean up function, the set visibility to true happens here.