I'm having an issue with data rendering properly within a Vue component. We have a scenario where we update the route, but it loads the same component. When this happens, it appears that the lifecycle hooks don't run. I assume that this is intentional and that Vue is trying to be performant.
I'm looking for a way to force the component to re-render giving me access to the lifecycle hooks again.
Related
We are making an axios call that pulls in a gigantic object which is used to render a very lengthy UI using Bootstrap Vue.
The issue is that the UI continues to be rendered well after the axios call has been received.
Is there a way to check if everything is done rendering in Vue? The mounted hook does not work here.
More context:
The Laravel Debugbar gives me the best feedback here. When #6 AJAX is done, I know that the UI is done rendering. But how I can sync Laraven's debugbar with Vue's hooks?
Maybe to try with this.$nextTick inside updated hook
There is another lifecycle hook in vue beside mounted
The updated lifecycle hook is fired everytime a component reactive property changes and the virtual dom is updated.
To react to virtual dom changes inside the updated hook you can use nextTick()
In a React project Im using react-router-dom version 5.2.0. I want to navigate trough pages and components programmatically by calling history.push(path). It seems navigation works but I get a warning:
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state
As I understand, the push functionality is setting state in render phase, but I don't know how to solve the problem.
I want to prevent re-rendering of the whole tree, so, I thought to use the setNativeProps to update the specific component when needed, but setNativeProps is not working for all components. I am using both setState and setNativeProps in my react native application. The setState works just fine for all components but setNativeProps do not works for all components.
What is the difference between setState & setNativeProps? For what kind of components setNativeProps should and shouldn't be used? A little example will be more appreciated. Thanks !!!
The React-Native Documentation explains this very well :
It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is the React Native equivalent to setting properties directly on a DOM node.
check this link for reference
Use setNativeProps when frequent re-rendering creates a performance bottleneck
so basically the only use case i can see for it, is when you are creating continuous animations and you don't want to affect the performance of your app.
in almost all other cases, setState will be more than enough.
And in case you need to control when your component should re-render check out
shouldComponentUpdate
After reading one of Alligator.io posts about Vue that was saying that mounted lifecycle is a bad place to use http get. I was wondering if there are any guidelines to how properly get data from API in Vue.js?
I`m prefer call API in created hook. Quote from alligator.io:
In the created hook, you will be able to access reactive data and events are active. Templates and Virtual DOM have not yet been mounted or rendered.
So you easy can access to data to parse and save response from a server if you need.
The created() lifecycle hooks fullfills all requirements for fetching and processing API data.
However the official Vue documentation uses the mounted() lifecycle hook in example code for integration API calls with axios:
https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
Both lifecycle hooks mounted() and created() are widely used for fetching API data and considered as good practice.
The answers make sense but if we use the mounted() hook to call the API's, assuming that the DOM is rendered. If we update a state here in mounted() will it trigger another render?
I am sure that in created() hook the DOM is not yet mounted. So, I might go with created().
Answer
The best hook for this are mounted and beforeMounted expect some edge cases
Why?
Vue can cache the components and created hook doesn't give any guarantee that Vue will apply it on the next mount. Sometimes you can find that your component has been saved the state. So if you don't see a component, it doesn't mean that it haven't been created.
SSR: If you want to get a universal component its won't be valid to place any fetch methods to created hook. You will just receive an error while ssr rendering. And mounted hooks work only on the client side
If you care about performance and time, please don't. Fetch will be done after created and mounted hooks anyway, because hooks are synchronous and fetch is not. Also time between created and beforeMounted is very very short.
You can place it to created if you don't plan the ssr and if you know how Vue works and you really need to place it to created hook.
I am still learning React and I apologize if this is a stupid question. I am currently planning about the architecture of my simple App.
I am using Next.js for this project
I have a component that calls the third party API for data every 5 seconds. The data is shared among all pages in the app.
If the component that is fetching the data is not on the main/home page. Are there anyways for homepage to get the data it needs from another page?
For example [Below are all pages]
index.js // Plain simple page that displays current weather and top music
http://localhost:3000/
weatherforecast.js //Using componentDidMount every 5 seconds to fetch Weather Data
http://localhost:3000/weatherforecast
musicplaylist.js //Using componentDidMount every 5 seconds to fetch Weather
http://localhost:3000/musicplaylist
The data shown in homepage has to be refreshed every 5 seconds if there are changes to the following data in weatherforecast.js and musicplaylist.js
I had this in mind but I have a feeling that it's not the right way to do it.
In the Homepage.js, include WeatherForecast and MusicPlaylist components to fetch the data. If this is the case, it seems like I am repeating the same principle in every page.
I found out about Redux which store states as a global object. But how does the state know when to update. But before we getting to state, I am still not sure if components on another page can fetch the data without the user accessing the page.
Thanks for reading this question.
For a pure React solution, you need to utilize other lifecycle methods available for React. componentDidMount is a good spot for making API requests, so you're in the right place to start. However, componentDidMount occurs only once, right after the componentWillMount and after the DOM is ready with a complete render of the component. Setting your API call to run at a set interval will not trigger a rerender of the component, no any of it's sub components. Instead, use componentWillRecieveProps to add your interval request logic. After each interval completes, run setState with the new data from the request to update the default state defined in your constructor. As a bonus step to improve performace, follow up with function that returns a bool in componentShouldUpdate. This way you can strictly define how and when and what is causing any and all component re-rendering.
Redux is an excellent solution to take care of what you want to do. Personally always use it in my React projects to manage state. Using Redux, you could make your API calls still occur in componentDidMount, however the call can hook into your Redux store and update your initial state. The frees you up from have to worry about the local state of your component and how to go about conditionally rendering everything else in your app. Plus Redux abstracts other functions you need, like re-running your fetchToAPI in certain intervals, into their own source (known as Action Creators). Action Creators hook directly in the Redux store so that when one is used, the resulting state diff is passed to Redux's Reducers, which in turn update the application global state. Then all that needs to be done is to have all of your components that need re-rendering on global state change to listen for state changes that occur in the Redux store and conditionally re-render based on the diff of the store from prevState => newProps. This can be setup fairly easy using the boolean check in componentShouldUpdate.
Hope this helps! Cheers.
Redux passes the data throughout the connected components via prop, given that a component is mounted whenever it receives new props a new render cycle is initiated so it will reflect your changes, moreover if you dont want to use Redux you can try using the new context api which is easy to implement and will also be suitable for your solution here is a tutorial on how to use it
To pass data between pages in next.js you will have to use Redux. The idea of Redux is to have a single source of truth. In redux you update the state by calling actions. To update redux state you have to create something called action creators which dispatches action to update the state.
Answer to your question as to if components on another page can fetch data without the user accessing the page is that they do not need to access the data. The components are mounted only when they are accessed, so it will fetch the data when they are mounted.
Regarding the state change notification, refer to below image, and hopefully it is worth one thousand of words:
Original article here.