I have a FlatList which I would like to optimize by using pure components.
As I am new to react-Native I am not sure how pure component will act in a situation were actions(functions) will be passed as props.
I know that their benefit is reached by shalow comparison of state and props which prevents rerender but I am not sure how a redz action will affect.
I assume that since it doesn't change it won't affect the performance.
Is this assumption is correct?
FlatList is already a PureComponent and I would definitely not suggest to optimize it in this way as you can easily run into bugs. It already takes care of rerendering things when necessary. But answering your question - same redux action is the same function across rerenders, you can comfirm it with console.log(this.props.myAction === this.props.myAction)
Related
We use wix/react-native-navigation and tried to use Context API from react.We need all the screenshots to receive data and when changing in one place, there is a change in all places.The api context is not suitable, it makes a context for each screen, that is, when changed in 1 screen, the data will not be rerender in another. I would also not like to use Redux since editors are not signed in all screenshots, and it’s too difficult to forward props.
Does anyone have any ideas how to solve this problem?
This seems to be a case for the model view controller pattern.
Each screen would be a view in this pattern. You need to trigger a rerender when the data changes. You can define functions in the react context (model) and then reference it in your lifecycle methods (controller) of your different views.
I have a sort of WhatsApp clone project. From the users listing component, it will redirect to each users chatWindow. I dont want to re-render the chatWindow component which was already rendered.
This is what happening
Navigate to ChatWindow1 from Userchannel - ChatWindow1 mounted
Navigate to Userchannel from ChatWindow1 - ChatWindow1 unmounted
Navigate to ChatWindow2 from Userchannel - ChatWindow2 mounted
Navigate to Userchannel from ChatWindow2 - ChatWindow2 unmounted
Navigate to ChatWindow1 from Userchannel - ChatWindow1 mounted again.
I know using state we can render the ChatWindow again. But Is there a possibility to avoid the unwanted re-renderng. Currently I am usinf RNRF as the router.
Optimising re-render can be done in multiple ways in react.
You can use PureComponent Implementation where react itself shallow compares the props and re-renders only when necessary.
If you want more granular control, go with shouldComponentUpdate which gives you a lifecycle method where you can compare the props and decide whether you want to avoid render. Please make sure the comparison is not complex. The more complex comparisons can make the app slow, in which case the optimisation back fires.
Use Flat list instead of List view or scrollview for better performance and make sure you add a keyExtractor and Item as a PureComponent.
Make sure the code splitting is properly done. you cannot optimise a very large amount code in a single page. If the components are small enough, you can optimise them better.
If you have a lot going on the JS, I would strongly recommend using a native navigation solution like react-native navigation
You can use console logs in render to find out the render count and take necessary actions. Please make sure that these optimisations can block necessary renders as well. So make sure props are different when you want to re-render things.
Regarding the mount / unmount
In most cases the navigation keeps the screens in the stack. Going back will not trigger a re-render. You can do one thing, make sure page works on props, so that re-render happens only when data changes.
Helpful Links:
https://medium.com/#ohansemmanuel/how-to-eliminate-react-performance-issues-a16a250c0f27
https://medium.com/vena-engineering/optimizing-react-rendering-61a10e741edb
Since your screens are unmounted there is nothing wrong to re-render when you navigate back to that screen. Of course you could avoid this by having all your screens mounted but that might cause memory leak.
In regular React, there is a way to force re-renders of stateless functional components with top-level API ReactDOM.render().
Is there a way to force re-render of a stateless functional component in react-native?
say your component is myComp,
myComp.updater.enqueueForceUpdate(myComp)
it is strongly discouraged to use this in real time application, due to the nature of stateless component are suppose to be 'stateless' and its concerns is solely to one time render its content.
I'm getting into react native and redux, and as far as I understand all reducers are invoked upon a triggered event that changes state, regardless of whether it is tied to the specific action triggered. So my question is... isn't this highly inefficient? For example, in responding to a touch event, without redux you have one callback responding to the event. However, with redux, every reducer in your app is invoked even if that action/state has nothing to do with the event in question. How is this good?
One way to optimize your redux store(s) is to to use selectors with a library such as Reselect as documented here in the Redux docs.
I am implementing android application using react-native and redux. My container component is updating frequently but props which I am passing to child stateless component not changing, but it still re-render all the time. How can I prevent this re-render? I know that I can use shouldComponentUpdate, but then I need to check there all properties.
This is exactly why React doesn't do this for you. It would need to check all the properties and their children (and descendants). This could be a lot of work.
If you use React-Redux, just connect the component to whatever data it needs and it shouldn't rerender, because Redux makes different assumptions about your data. In particular, it assumes you use immutable objects everywhere, which means it doesn't have to check children (or descendants).
Without React-Redux, you will need to implement shouldComponentUpdate, but if you use immutable data, you can implement a generic function to do a shallow compare and use it in all your components. If you do not use immutable data everywhere, you'll need to either use a deep comparison, or to optimize, implement shouldComponentUpdate on a component-by-component basis to do specific checks.
This is a big reason why React-Redux is used.
That's how React works. If a parent component re-renders, all of its children will re-render, and then React will diff the virtual DOM output and see what actually needs to be updated in the real UI. This process happens even if the props being passed to a child component haven't changed. And yes, shouldComponentUpdate is the right solution here, but that can't be used with functional components as far as I know, since they have no lifecycle methods.
If you want to prevent re-rendering, you'll probably need to convert those functional components into class components, and either implement shouldComponentupdate yourself, or have them extend React.PureComponent if you're using React 15.3.