I have a React application. I am on a particular page which has a form. I enter details. If I resize the window to mobile view, the page is getting re-rendered because of which the form is becoming empty. Why?
My guess is that some state variable is getting changed while resizing because of which the page is getting rendered again. So, I removed all the state variables of the page and kept a simple
return (
<H1>Hello!</H1
)
in the render function. And I still see that the page is getting re-rendered. (I checked it on the
useEffect(()=>{
alert('rendered!!!')
},[])
Now, I am not sure if that is the reason why the page is getting re-rendered or something else. Any pointers on why this is happening? If it has to be any state change, how to track which part of the state is getting changed?
Related
I have a react-editor-js instance that allows the user to type in some blog content. My form submission button is up on the header and not on the form body. Therefore I use redux to let those button clicks known in my form.
When the button clicks, the isPublishing value in my redux changes. My form is listening to this component using const p = isPublishing(state=> state.test.isPublishing).
Refreshes are evil in this case, as it resets my EditorJs form data. It'd be amazing if I can listen to the changes without page refreshes. How can I achieve it?
Thanks in advance!
Thanks to #Shyam for the solution.
My assumption that useState and props cause render was correct. There is no direct way to avoid it.
I am using react-editor-js in my project and that's what caused the issue
<EditorJs
instanceRef={()=>{//code to save the reference as state variable}}
enableReInitialize
data={{}}
tools={EDITOR_JS_TOOLS}
/>
The reason for state loss was that my instanceRef was being reassigned every time the component renders.
This reassignment can be prevented by wrapping the method to save the reference as a state variable with useCallback()
I want to prevent my app from displaying the wrong case of a conditional rendering (before retrieving the data) during the loading phase.
Let me explain, when I'm logged in (the user data is stored via useContext hook) and I refresh my page: automatically the page displays the forms for log in but it disappears a second after that my PWA understands that I'm logged in as it retrieves the user data. How can I prevent that little timing issue ?
Thank you
It should actually be quite easy to keep from rendering it, until you know for sure that it needs to be shown. Something like this:
{this.state.needToShowLogin &&
<LoginForm />
}
In the init part (e.g. class constructor) you start with this value being false. Then change it if & when you decide that it needs to be set to true.
I have a parent child that looks like
<SelectedPaginator>
<DisplayComponent/>
</SelectedPaginator>
It turns out that <DisplayComponent/> has information that needs to be retrieved so that <SelectedPaginator> can render properly. So I set up a callback that I assign to a property so that <DisplayComponent/> can share this information. When the callback is made I save the information passed in state of the 'parent' component (in this case <SelectedPaginator>). The problem that I am running into is that when I set the state (using the useState hook) I get an exception that I am not able to update a component while another is rendering. How do I successfully setState in the parent without interfering with the rendering of the child? Or how do I find out what is currently being rendered so I can focus on the error? I am currently using useEffect to control the timing of the call.
I'm trying to make a toaster component.
https://codesandbox.io/s/62n81oy4pr
in index.js, this.setState({ toasterText: "Room added to summary." });
from this code, you can change the value of the toaster whatever you want and When you click the button several times, the toaster keeps showing and then disappear after 2.6 sec from the last click.
However, When I set a component (or even a div) into the 'toasterText' and click the button,
something like this,
this.setState({ toasterText: <Component>asdfasdf</Component> });
the toaster appear by one click and disappear as soon as I click the button again.
I think I can do something with the componentDidUpdate or am I just not allowed to set components in setState??
sorry for my bad English.
The reason it "disappears" is because the component is re-mounted (destroyed and re-created), as opposed to re-rendered (text updated) in your first example.
While it is technically possible to do this, it is considered anti-pattern for numerous reasons (the problem you experienced being one of them). I can't think of any reason you'd ever want to take that approach; just stick with updating the text.
If you really have to implement the second approach, try adding a key prop to the component. That should prevent the re-mounting behavior.
I have a router with a lot of screens and nested navigators, and everything is working exactly how I want it to. I'm using redux for a lot of state throughout, but I'm not using redux for navigation state.
If something unexpected goes wrong, for example no network connection, an alert comes up. Once the alert is dismissed, there may be some missing information on the screen. I did the "pull down to refresh" thing using RefreshControl and StackActions.reset in a couple of the most common places with ScrollViews.
I suppose it's possible to write this refresh function for every single screen to re-fetch data on pull-down refresh, but it seems wrong, like I should be able to get the navigation state from anywhere and then use StackActions.reset to reset the navigation state to exactly where it was where the actions are navigations to everything in the stack using a generic refresh function. Having a bit of trouble deciphering the navigation state to be able to do this generically from anywhere though, has anyone else done something similar?
try
navigation.replace(routeName)