CODEWITHSUNDEEP
javascriptreactjsreact-native
eulercode
eulercode

Reputation: 1157

React native global value rerender

I am new to react/react native. Coming from javascript background i want to achieve some hack of rerendering shared global value without introducing too much code.

Assume that I have multiple component , and which shared the same global value {global.count}. {global.count} should be updated automatically when one place changes. I read a lot about hooks, context, redux but all of that is too much thing and fussy to be implemented. At least, it is not as simple as what i intend to updated value in plain javascript.

What I expect is once i update the value in any place it will be "smart enough" to rerender all those component value (whereever it is visible on screen)

Below is illustration of what the component I have. What I expect is whenever i set/assign new value to global.count = 5 in anywhere, then it will auto update/rerender in all related component (in visible area) without any additional code.

Visible area: What user saw. Means that it will be update in BottomNavigator since it is always visible to user, but ComponentB wouldn't rerender until it is visible(this is optional)

I believe this is a thing that can make life easier but i couldn't find such a simple "hack". Appreciate if anyone do work on this kind of solution before.

<GlobalStore key="global" storage="AsyncStorage">
   <Navigator />
</GlobalStore>

//Visible currently
<ComponentA global={global.count}>

</ComponentA>

//Not Visible currently (will auto update and rerender once user enter the screen with this component)
<ComponentB global={global.count}>

</ComponentA>

// Always visible
<BottomNavigator>
   <Tab1 global={global.count}></Tab1>
</BottomNavigator>

Upvotes: 0

Views: 183

Answers (1)

Rafael Hovsepyan
Rafael Hovsepyan

Reputation: 781

React won't re-render unless that variable(value) is in state. You have to use, state, context, redux, or any other state management system.

Upvotes: 1

Related Questions