I've been created a modal that shows on the home page. Modal shows only when U enters the site from a mobile device. It is working well, but I want to have this render only the first time when the site is rendered. Now, whenever I came to the home page it shows.
You can put the modal on the highest parent of the site component tree hierarchy (for example in component) and then use the useEffect hook to make it show up only on the first render of the component like so:
useEffect(() => { ....your logic here that triggers modal open } , []);
Edit:
I see that you mentioned you are only using the state, so if the initialState if on the required state of modal open, then it will be enough to just lift that state up to parent component of the higher component.
Whenever you render some other component it flushes its previous state at component level, There are 2 ways to do that, either you have to use state manager like redux or react's context api and store the state on root level. And if you do not want to show the page even after user closes the browser then consider using local storage.
some references:
Context API
Redux
Local Storage
Related
i am new to Reactjs, In my project i am using navBar and on click of various menus in navBar i am rendering same component with different data by passing props. but what i want is , suppose when i go back to the previous menu , i don't want it to re-render with the props that i passed it previously i want it to stay persistent with whatever changes i had made in that menu , right now my changes are gone when i switch to different menu option.
<adminn data = {data[0]} /> -> for NavBar menu option:1 (made some changes with the table on this page)
<adminn data = {data[1]} /> -> for NavBar menu option:2. (made some changes with the table on this page)
I don't what it to re-render when i switch to different options and what the changes to be saved for each page
Please help ! Thanks in Advance
You have to play with CSS and have to display only that tab which is currently active. Also you can make your component as PureComponent or you can override shouldComponentUpdate() lifecycle method to stop extra re-rendering of your react component.
Memoization enables your code to re-render components only if there’s a change in the props. With this technique, developers can avoid unnecessary renderings and reduce the computational load in applications.
const multiply = (x,y) => {
return x*y
}
My React app is currently fairly simple in terms of structure, though the logic in the components is getting more intense. The structure is basically Index which has a Header component and, if the user is logged in, will load the Home component, which has components X, Y, and Z on it, corresponding to left sidebar, main area, and right sidebar.
As I'm working on the right sidebar, I have some console.log() statements to help out. I'm now noticing that the right sidebar Z component appears to render 7 times for a given fresh page load, based on how frequently I see my logging. This component has the rough following code:
Declaring various states for the component using React.useState([default value])
Checks the Redux store to fetch the currently authed user of my app (authedUser)
A React.useEffect() that checks if there is an authed user and if so, sets a couple component states. This useEffect triggers off of , [authedUser]); - I suspect this may be a cause of the rerendering?
Some click event handlers, including a more complex one that makes Google API calls when a certain button is clicked, using
The Redux store value for authedUser is used in Index, Header, and Z. The dispatch call that can change this store value only happens within functions relating to the user logging in.
Questions:
Am I right in being concerned that this component is re-rendering so much?
Any ideas on what might be causing it?
Are there any tools I can use to answer the "when/why is this re-rendering?" question?
You have a home component and three children's components on it. You may have a state variable in your home component and pass these state variables as props on to child components. Your home components re-render each time when each state variable changes its state, resulting in child components having to be re-rendered. So as to make the child component re-render only when its related state variable changes its state, you need to use the react memo and the useCallback hook.
My React app is using a modal to create, update, and delete data fetched from mongodb.
This is my component structure:
index.js
making the fetch call to retrieve the data
passing the data as a prop to the admin component (admin component is a route)
admin component
displaying the contents of the data on the page into a grid
open modal component
modal component
create/update/delete data with a form and make a fetch call
I want the admin component to update and show the created/updated/deleted data
immediately after submitting the change in the modal.
I know normally you would have the displayed data as state and then alter that to update the
component and show the new data. In my case that data is getting passed in as a prop to the admin component
from index.js which is fetching the data. I thought another potential way to update the component would be to
create an isUpdated state hook and pass into the modal and toggle its value but that didnt seem to work.
You can try to add real-time updates to your component, so any changes to the data will be reflected without the need of forcing your components to re-render.
You can use streams to get your updates in your database. There is a page with a good tutorial:
https://pusher.com/tutorials/mongodb-change-streams/
This had a fairly simple solution. I was able to solve this by setting the data passed in as props to the admin component in a state hook then pass in the variable and setter function to the modal. In the modal, build a new object with the data collected from the form and use the setter function to push the new data object into the array of the hook and I got the result I wanted. Thanks to the other answerers as well.
I am subscribing a user to events using pusher-js, and am having an issue with the information I am passing in the callback not staying updated. I use react router and have a 'location' context on my components.
connect() {
let {pusher, channelName, eventName} = this.props;
let pusher_channel = pusher.subscribe(channelName);
pusher_channel.bind(eventName, () => console.log(this.context.location.pathname));
}
For demonstration purposes I am just console logging the current url pathname the user is on when the event comes through. This component gets loaded and stays loaded when the user loads that application. The problem is that, if a user navigates to another page in the app and an event comes in, the pathname does not reflect the actual page the user is on but rather the page the user was on when they initially loaded the app.
Is there a way to keep the callback updated as to any context or prop changes that have occurred?
Updating Context
Don't do it.
React has an API to update context, but it is fundamentally broken and you should not use it.
Read more.
Use React Router's location descriptors instead.
Should child components never have a state in React? I understand that state should be maintained by the "wrapper container" or parent container and it should have unidirectional flow. I have started with React and have a header container with upto 10 child components.
Let's say one of the child component is a Form with a submit button that can be enabled or disabled.
Should this child component not be able to have a constructor with state initialized for the button and be able to directly manipulate it or is it important that I maintain states as minute as this in the wrapper container "only"?
You should let the parent container manage the state of forms. I usually attach an onChange listener to each input and then when the submit button is clicked I call a function in the parent component to submit the value contained in the state for my form inputs. The form should only render inputs and do nothing else, basically a dumb component.
The purpose of React is providing a component system to front-end. It does not specify/enforce how state flow. People generally prefer state-less components because it is easier to share and distribute. However, front-end component can never be fully state-less + declarative.
In my opinion, you should feel free to use this.state to manage local state when you feel appropriate.