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.
Related
https://reactjs.org/docs/context.html states:
Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.
https://reactnavigation.org/docs/hello-react-navigation states:
Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use React.memo or React.PureComponent for your screen components to avoid performance issues.
and also states:
Use React context and wrap the navigator with a context provider to pass data to the screens (recommended).
Use a render callback for the screen instead of specifying a component prop:
This implies in React Navigation, for performance, you really want context which destroys the re-usability. Is there a 3rd way (e.g. recoiljs or any other things that may have come about)? I am hoping to possibly get the best of both somehow.
if i'm getting you right you want to pass props to another component without props drilling.
what i would suggest is to use the navigation hook navigate/push methods like this -
const navigation = useNavigation()
onPress={() => navigation.push('ScreenName',{'item': item})}
onPress={() => navigation.navigate('ScreenName',{'item': item})}
when item is the prop, and in the other screen you could accsess it using
route.params.item
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)
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.
The React-Native Navigator component maintains a "stack" of components, which constitute it's navigation history. If some of those components bind to native modules, for instance the react-native-camera library, of which expect to be considered a singleton (that is, exist at most once at a time), what would be the best way to manage that requirement? My first stab would be to only allow pop() from that singleton component, but I would like something less restrictive.
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.