I have a parent route with a nested child route.
The router-view in the parent route (that the child loads into) is wrapped in a transition. My understanding is that this should transition the child in and out when entering/leaving the route.
Neither transition happens by default. Adding an appear prop to the transition fixes the enter transition, but not the leave.
Is this specific to the fact that it's a nested route? If so, is there a best practice for working around it?
Here is a reduced test case: https://stackblitz.com/edit/vue-y6bbb6?file=src%2Fviews%2FParent.vue – click the 'child' and 'parent' links at the top of the page.
Transitioning routes is just transitioning between components that belong to the same group of routes (root routes, child routes). Another way of imagine this is that every component that will be rendered between the same router-view will be transitioned.
In your case, you've registered only one child route, that means that It won't transition between any other route since there is one only. Thought, you transition your child route in initial render by applying appear.
Also, applying :mode when using transition component in router-view is best practice since by default entering and leaving transition happens simultaneously. Usually, this avoids flickering layout.
You could see an example here: https://stackblitz.com/edit/vue-pkup3g?file=src/views/Parent.vue
Just forked your project and added some additional code.
Remove transition key in your app.vue
<router-view v-slot="{ Component}">
<component :is="Component" />
</router-view>
Related
I would like to find a solution to use the same component instance multiple times, on different pages but without creating a new instance for each render.
Each page must use the first initialized instance of the component. In few words, reuse the previously rendered component.
My goal is to display a map and draw a route on it with the current GPS position, which is updated in real time. This map is displayed on different size, on different locations / screens.
The problem is that this component must :
be displayed on several pages independently
not be rendered several times
must be initialized only once
Example:
Component A is initialized on screen 1. Then, we navigate on the screen 2, which must display Component A too. But the particularity is that we must reuse the Component A on his exact previous state like it was on the screen 1 (with the view rendered, his states etc.).
For now, the component is always rendered on each screen once (standard behavior).
I tried hooks like useContext, useMemo but I cannot make it working like I want.
I tried to instantiate Component A on the Navigator (react-navigation) and passing Component A as parameter of the views.
I've made too some attempts with library like react-native-portal but nothing relevant.
Do you guys have a brillant idea?
I'm trying to render a component only once (as soon as the page loads), but the component re-renders everytime the layout changes. Is there a way to declare a component above the layouts ? letś say, in the root component ?
I have two layouts, default and main.
The default layout is for the page view and the main layout is an empty wrapper without components.
The page with main layout is loaded as an iframe inside the page with the default layout.
When i change state inside the main layout i can listen to and get the changes whilst outside the main layout in the default layout i can't listen to and get the changes from inside the iframe/default layout.
Any idea why? Maybe because of the iframe, or because the Nuxt instance is loaded in both layouts separately?
Anyway i found the answer, the problem was that the iframe has a different state check how to sync them here https://github.com/L-Chris/vuex-iframe-sync
I wanted to see if there is a hook in Seaside that is called before rendering, and one after rendering. It happens to me that I want to show a notification on the screen, and I would like that once the rendering is finished, this component is modified so that the next time the rendering is done, it is no longer displayed.
Thanks and regards!
Instead of 'hooks', Seaside has component decorations that you can wrap around a component to change their behaviour. If you wrap your root component, you can implement a decoration that invokes hooks before and after rendering on your entire component tree.
However, changing the state of your components while rendering will break the state backtracking behavior that Seaside offers you. The state changes should happen in the action callbacks. So, there is no 'after rendering' phase where you can change the state of your component (well, you can, but it will lead to subtle problems). Instead, use the action phase (i.e. callbacks) to change the state of your component such that the next time the rendering phase is invoked, your component is not displayed.
I'm assuming that when you say 'the next time the rendering is done', this means after the user has clicked a link or done some other action. This means you can change state while executing the action callback and arrange the state of your rendering tree such that the concerned component is no longer shown. If you do it like this, the user will see the component again when he clicks the back button in the browser.
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.