React cleaner way to lift state up

Question

I've read like 5 SO questions and https://reactjs.org/docs/lifting-state-up.html and I haven't found a better way to do this. I need to toggle a pop-up window from somewhere else in my React project, and their lowest ancestor is App. I need to go through like 20 components across many different files if I want to lift the state up the traditional way (to App, and all the way down to both components). The affected hierarchy looks something like this:

App --> RightColumn --> Search --> ... --> SearchCardEntry --> SearchCardEntryColumn
    --> PopupWrapper --> PopupBook

I think there has to be a better way, especially with bigger projects with thousands of Components.

Answer 1

You can use React Context to easily share data components wide and avoid moving state among way too many layers.