I am thiking of Ad network such as Google Adsense, Outbrain etc.
I want to insert the ad within the contents but the ad is also refresh again and again every time react render the view. How can I deal with this issue?
React offers a variety of ways to manage and assist its decision making when it comes to updating components.
Use a key for the component containing the ad. React will be able to more intelligently know if a component needs to update or not. This could alleviate some or all of the pain in the refresh on your client.
https://reactjs.org/docs/reconciliation.html#keys
Another possibility, is to provide some logic for when the component should update (and change the ad) or not with the shouldComponentUpdate() lifecycle method
https://reactjs.org/docs/react-component.html#shouldcomponentupdate
Related
I was wondering which one is a better practice for a React app with firebase, I understand from the firebase docs that I should add it on every page that needs it, bu I was thinking that it would be easier to provide it as a context to all my components since pretty much all of them are relying on the user state to display the right information. So which one is better ?
I have tried both but I do not know which one is better in terms of best practices or when to use each approach .
Neither of these is pertinently better than the other.
The Firebase SDKs cache the auth information already, so adding an auth state listener in each component does not require extra calls to the server.
But there's also nothing wrong in principle with getting the state once at a higher level component and pushing it down into child components that needs it. Just make sure to re-render those child components when the auth state changes.
I have a problem with accessing the React Context object in my Custom Document page (Next.js).
Since I am working on a cookie banner for GDPR purpose, I want to use the React Context state in order to prevent the analytic scripts to be fired in the Custom Document page, if the GDPR is not accepted by the user.
However, I cannot figure out how to access the React Context state within my custom _document.js page.
Is that possible at all?
Or is there another good way in next.js how I can implement the GDPR Cookie Banner?
Many thanks in advance!
JP
I would like to know of a good way to organize reactfire hooks (such as useUser or useFirestoreCollectionData) in a medium-sized application:
I could put hooks in a top-level component, and pass this information as props down to subcomponents (or use a Context to store state).
I could put hooks within each component when needed, so I would end up with multiple useUser or useFirestoreCollectionData hooks.
The second approach decouples some of the components, which is nice since our project is under active development.
However, I am not sure if reactfire or firebase client library has built-in deduplication, compared to libraries such as SWR or react-query. I would prefer to minimize unnecessary reads.
I like to use a offline first approach when using the Firebase databases. None of the awailable libraries could fit our needs so I made my own list of providers where all of them are decoupled. The main goal was:
to have all data awailable offline no matter if the app is online or not (this also increases response time for users)
to persist realtime listeners for RTDB and Firestore
when you have for example a list and go to a single item and back you probably don't want to stop the listener when leaving that list component and start it again when comming back. If you stop and start it the firebase SKD will load all data from the database.
You can find the providers and an example app here.
We will be doing our first project using React.
It will not be a Single Page App, but a Multiple Page App.
What I'm trying to figure out at the moment is : what's the difference between a component and an app.
If I only use components, can I still use Redux to have some state management on the current page ? Or do I need an app for this ?
Thanks for the information you can bring !
THoma
There is no special object called "React App". React Components build an "React App" by coming together.
But React Components are formed like tree structure. That means each component have a parent component so you can create a React Component that named "App" and can put another components inside it.
You don't need redux for state management in React Components.
I hope the answers have helped.
Your app may contains a single component and still it will be a react App. If you are using multiple components in a page you can still use react-redux. Redux is basically a container for your states and let suppose you need some state from one component to be consumed in another, Redux provide you a mechanism to make the communication efficient and predictable.
You can also look at the React Context APIs as an alternate to Redux.
An app is simply a component that holds the root of the work you are trying to do. For example an App may have the navigation menu, testimonials, adverts, content, login avitar etc.
If you are making a single App per page (For example a testimonial) then you would still have a SPA. For example, adding testimonials, searching, editing.
You should only use Redux if you are using a SPA with lots of different parts with data in common. If you are making a one-app-per-page and there is no cross over in data then you can simply using Reacts State/Props to hold your data.
Redux is good, but it forces you into a complex path your should try to avoid. If you find yourself wanting data from different domains (customers address and a list of testimonials) then you should use Redux.
If this is a new applications (green) then I strongly recommend you build the whole thing within a SPA using React-Router to control components. you can use frameworks like Next.JS to ensure the site remains small in size (dynamically loading script only when required).
Lets say we want to have one instance of the application and multiple tenants trying to access same features but also have some level of customisation and of course data isolation. In short Basic SaaS model.
Tenants will probably be identified by subdomain/domain and/or by querystring.
So the main question (which is rather specific):
What are common approaches onto implementing a multitenant environment using React + Redux ?
Thinking loud:
How to approach/structure the Application Store.
How to deal with tenant specific configurations
Do I need to have some sort of a TenantContext available somewhere at hand.
How to ensure proper level of isolation and avoid race conditions?
What else should be kept in mind while developing it?
Any thoughts, ideas, past experience, advice, are highly appreciated.
Thank you!
A typical Redux store usually only reflects persistent data, and contains application-specific data, like which tab is active or what is the value of that field. But in case of persistent data, that's an interesting question. I believe React and Redux are simply not for that. But even though, there's an interesting solution for that: Relay and subscriptions.
Relay connects your components to a GraphQL source of data (typically remote), and then you simply access props that are seamlessly injected into component and given values from the data storage. With subscriptions, any update in the data storage causes its delivery to a connected component via a subscription established between the app and the GraphQL server.
Now, you can add an extra layer for multitenancy and synchronize data between nodes on a lower level, completely unrelated to React. The only thing now is that you'll need to listen to every update and send subscription updates, and there's no nice "single-click" solution for that yet.
You can see this discussion to get an idea how you can update a subscription. Good thing is that, on the client-side, the app will simply react to updated props with a connected component being re-rendered with new props.