I want to pass data between next js pages , large amount of user filled data including image . How can I achieve that?
I tried to look for nextjs docs but I couldn't find any solution
A small number of parameters are passed through router. If it is a picture, it is better to use vuex
You can either use global React Context or implement a state management library like Redux or Zustand etc.
Related
So I'm trying to send some objects to another screen but the problem is when I use navigation.navigate('ScreenName', {object}) I'm passing the data but also navigating to the secreen as well. I just want to pass the data without navigating to the screen itself and when needed I can go to that screen and view the data I sent.
Sounds like you need a state management solution of some sort.
Without seeing what your code looks like it's hard to know what the best solution would be for you , but perhaps try keeping that object in a Context / Provider which can be shared / subscribed to by both screens.
https://reactjs.org/docs/context.html
Is there any way in react to save UI and load it later ?
I came across several solutions like saving the UI state into a database but this solution is not smart if you are building a dynamic dashboard or a page builder for example with unlimited number of possibilities.
Also we can use reactdomserver from server or client side , data should be passed as props but in the case of a dynamic dashboard this solution will be very hard to implement.
I am new to react and will be very happy to know that there is a solution that can save dynamic content to a file or a database.
Don't save the DOM when you're doing React. You will always find a case that will break whatever assumptions you initially made.
Save the state/props that lead to the UI you need. Then pass those same props again to your component.
I'm working on a large project built with vue. We are using vuex as the state management system but their are some components where I don't need to access their data anywhere else. So, Is it right to store this data in the component data or stick with the convention and store it in a vuex module.
Thanks in advance.
You need to use Vuex store if the data must be accessible by multiple (independent) components. There are several reasons why you shouldn't store everything in Vuex store.
First things first complexity! If you are building a complex Vuex store you can not use effectively as your project grows.
On the other hand if you're filling your store with unnecessary states, all the states will executed in the first load in the initial JS and the more data will increase the payloads and that occurs longer load of the webapp.
So the best thing what you can do it is keep your local states locally until is it possible, und use Vuex when the communication of independent components is needed.
You can keep data with in your components. You can convert your non data sharing components to Functional Components link here.
Vue process functional components faster than normal one. By converting to functional one you will gain some performance boost.
It is totally fine to keep data with in the components if you don't need to access it globally.
When you create more than one Function Components, You must create keys for them too. You can find the whole conversation here. I gave all the details there with code samples as well.
ENJOY CODING....
I am using react-table (https://www.npmjs.com/package/react-table) and I need to keep the filters active with the values that I had entered initially even on navigation from the page until I remove them myself. How do I implement this?
There are many ways to do this. You can use a global store like redux or Mobx to keep the data and populate your views from there (if you don't know how to use any global stores yet, learn now and get it over with).
not recommended you can pass the data you want to preserve in between routes using your navigation library. But don't do that. This approach would almost immediately start creating problems with maintainability for oyu.
If I use react with redux - does it always necessary to fetch data from the redux action? Or it depends if I need the data to be stateful?
For example: I have a container which displays a user profile page. Can I fetch its data from the componentDidMount?
Thanks.
Below a list of rules of thumb which could help you to determinate what kind of data should be put into Redux or in your component, I tried to write down few assumptions, but please in mind you know only the right answers :):
Is the data used by other part of your application? Probably in your case yes as a User Profile property like name could be used in different components, like the head of your site, profile details, basket.
Do you need to be able to create further derived data based on this original data?
Is the same data being used by multiple components? Probably yes.
Do you need to cache the data? Probably no.
Yes - this is how you would fetch it if there wasn't redux being used.
If you want to use redux (to make profiles available in general etc.), you should call the action from componentDidMount to properly handle lifecycle events etc.