React changing state in Parent , does render calls for all its children and sub-children as iteration?

Question

i am setting the language name in my local storage , when it changes from a dropdown in topbar , i want the whole current view to be re-rendered and words translated to the selected language. my layout is like this

render(){


 return (
    <MainContainer>
       <TopBar/>
       <SideBar/>
       <RouteInsideSwitch/>
    </MainContainer>
    )
}

in render of components ,the words to be translated basically calls a function that returns the correct word based on the local storage language name.

i change the language and i set the state in maincontainer for selected langauge and set it in local storage. however i dont want to move that state from Maincontainer to all my components. also dont want to store it in redux because then all the possible containers have to listen to it and then pass it to their children as props.

what currently happens is that saving state in mainContainer without passing it to any children , the children does re-render but only the immediate ones , if there are more children in those children and so on , it does not re-render because i m not passing the state throughout the chain.

open to any suggestion based on different pattern for language changing. but my question is that is there any way to re-render the current open view (all components in dom).

Answer 1

If your concern is that you have a number of "possible containers" which all need to handle the state change, perhaps consider creating a higher order component that includes the common language rendering logic (your RouteInsideSwitch leads me to believe this may the issue). In that way, you can avoid duplicating that logic across a ton of "possible" components that all require the functionality of dynamic language rendering and will avoid the need to dial a bunch of components into a redux store, assuming they are in the same hierarchy.

    const DynamicLanguageComp = RenderComponent => {
         return class extends Component {
              constructor(props) {
                  super(props)
                 //additional state setup if needed
                }

             changeLangFunc = () => { /* handle change */ } 

             render() {
                 return <RenderComponent handleLanguageChange={this.changeLangFunc} {...this.props} {...this.state} />
             }

         }
    }

If you would like to avoid a re-render on certain intermediate components that may be receiving props by way of state change you can implement the lifecycle method shouldComponentUpdate(), which by default returns true. You can make a comparison of nextProps to your current props, and return false if a re-render is undesired despite new props.