I am struggling with using Web socket in ReactJS.
I have followed this solution: https://stackoverflow.com/a/60161181/12962511
This solution works pretty good!
However, I wonder why onmessage is in useEffect.
I tried onmessage in the useEffect with [] which is componentDidMount. This results reset my states but not starting the function from the beginning because useEffect with [] did not get triggered in this case.
So my question is:
The difference between put onmessage in useEffect with [] or in just useEffect.
The necessity of useRef in react Hooks websocket (I tried both ways and it looks pretty same on network console.) - I know useRef prevents making websocket every re-render.
I have stuck this issue for all day long. :(
Please help me.
Thank you so much!
useEffect without dependencies will be triggered every render. As you need to make subscription only once, it should be with empty decencies [].
In your example, useRef is used only to pause listening to messages via websocket. If you don't need this logic, you able to not use it.
Related
I was getting very high firebase reads from past few days so when checked I found it's because of the useEffect getting fired multiple times. if I change the parameter to [] it don't fetch anything.
I am created a related petition section where petition of particular category will be shown, when I set the parameter to relatedPetition it does work but the useEffect fires multiple times making my firestore reads high and when I just keep it [] it shows nothing in related section
Go back to using [] for the second argument for useEffect. Then change your setRelatedPetition to setRelatedPetition([...somePetition]).
Hey yashraj this is a common problem with the useEffect hook, can i see the code inside the useEffect? so I can be able to help you more, but then to solve the problem add a variable to the dependency array [] a variable that is directly or indirectly affected by updates from data fetched from the firebase api,
would love to see the code, are you calling the api from useEffect hook?
It seems to cause infinite rendering. Why not putting the array stringified? See the link below. https://stackoverflow.com/a/59468261/19622195
I have a problem. Im developing a nextJS app. React renders my components twice. I know it is because of StrictMode. But in React and nextJS document i found that they strongly suggest us to use StrictMode. But in a part of my app that i am working on, i use useEffect and i want some codes in useEffect run just once not twice! Because runing codes there twice, make a bad bug. So How can i do that? How can i do something to make react run some codes in useEffect once? And i placed [] as a dependency of useEffect but it didnt work! For example something like this:
`//inside a component that is a child of React.StrictMode
useEffect(() => {
/* strict mode cuses adding something to body twice. I want to add it just once and without using cleanup function */
document.body.appendChild(something)
//it runs twice, too. I dont want it!
console.log('test')
}, [])
`
Thanks for helping!
The general recommendation is that every effect should return a "cleanup" function, and the initial effect + cleanup should be a no-op (and thus effect->cleanup->effect = effect). In your case, you could remove the appended DOM node in the cleanup:
useEffect(() => {
const node = document.body.appendChild(something)
return () => document.body.removeChild(node);
}, [])
The goal of strict mode is to catch issues like this for future versions of react where effects may run twice in weird cases (React may unmount and remount the component, and the bug would appear).
What if you made something a dependent of the useEffect function so that it only runs it when that 'something' changes? Unfortunately rendering twice to flush out side effects is just how strict mode works and there isn't a good way around that. I don't really always use it though even though it is recommended, and I am a big nextjs user.
I have already created a react native CLI project. Now every time when user come to my screen I want to update some value. In my home screen, I have three top tabs. When the user clicks on the 3rd tab. I need to update some values every time.
For those three tabs, I am using: ScrollableTabView
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
I used this below code for every time to update the values. But this is calling only for one time:
useEffect(() => {
alert('i called');
})
Then i tried :
import React, { useEffect, Component } from 'react';
componentWillMount( () => {
alert('called ');
})
But I am getting error like cant the variable componentWillMount.
How can I solve? Please help.
Thanks.
It seems like you are using the new React Native way by using hooks and functional components only.
It is not possible to use reacts lifecycle methods anymore - you will have to write your own componentWillMount code. Take a look at the docs or take a look at this answer:
How to use componentWillMount() in React Hooks?
~Faded
So, going back to React basics. There are 2 ways of declaring a component: using a Class based component or using a functional component which you are clearly using.
Before React Hooks, we couldn't have state in our functional components, that means that you cannot use the LifeCycle Methods from a Class based Component. I really suggest you to read the documentation. Instead, we can use hooks to get the same behavior.
Now, the useEffect hook will receive 2 parameters: the first one is the callback we are going to execute, and the second is an array of dependencies that will trigger that hook. It means that the hook will watch for changes in the variables you put in your array. Since you are not declaring an array of dependencies, the hook will be executed on every render.
So, what's exactly the problem? The problem is that declaring your tabs with react-native-scrollable-tab-view won't unmount the components for each tab, there are no variations, that's because your alert log is only being logged once. Because there are no more renders, just once.
Looking at the docs, you might be using onChangeTab method, which apparently will be called when changing the tab.
I'm running into a strange issue with React Router.
I keep getting the warning "Can't call setState (or forceUpdate) on an unmounted component..." even though I can prove that the component in question is hitting its componentDidMount lifecycle method.
I'm perfectly fine with ignoring warnings. The thing is, the app isn't working properly because of this.
Current state of my flailing about:
https://github.com/tomizechsterson/chargen-ui
After starting the app, if you click on the 'AD&D 2nd Edition' link, you can select entries in the table just fine. It's after you navigate away (to either 'Home' or 'D&D 3.5') and back that you can no longer select entries and the warning pops up in the console.
I've tried going through the React Router docs, but wasn't able to figure out what I needed to know to solve this.
Please suggest.
Turns out that converting a lower-level component to a functional component in my hierarchy avoids this issue. Not sure why, but it's removed my roadblock, so there it is
Here's my problem:
I'm new at reactjs and I'm trying to make this app using SWAPI (swapi.co). For now I need to list characters and some info about them. The problem is I have this component called SelectedCharacter that returns some info about a character that was selected in a div.
The moment a character is passed through props to this component, I get a response via xmlhttp and the info is displayed. The thing is that I want to put a "Loading..." message while the data is fetched. This is how I was trying to figure it out:
I set up the componentWillReceiveProps function, where I test if I'll need to load stuff and the componentDidUpdate, where I fetch the data from this api and update the status.
I know, from react life cycle, that a render is called between componentWillReceiveProps and componentDidUpdate, and it indeed is.
I expected, then, that if I did this:
render() {
if (criteria) {
return <div>Loading...</div>
}
}
The thing is: even if this criteria is true (I tested it using console.log()), the message doesn't show until the next re-render. Am I doing anything too wrong here? If it helps, my code is at github.com/piubellofelipe/StarWars, the problem is at the selected_characters.js, in the src paste.
Thanks
I've been looking at your code, trying to work this out for you and I don't have any concrete answers for you, but I've noticed a few things that may be making things a bit unpredictable.
1. Calling forceUpdate
componentWillReceiveProps(){
this.setState({loading:true})
this.forceUpdate();
}
Calling setState will trigger a render, so the call the forceUpdate is not required here. This means there are more renders occurring than you might expect.
I believe this may be the cause of your issue for a pretty complicated reason. From the setState docs
... setState() is also asynchronous, and multiple calls during the same cycle may be batched together.
And from the forceUpdate docs
Calling forceUpdate() will cause render() to be called on the component...
My theory is that the call render triggered by setState, asynchronously setting loading to true, is being delayed and the one from forceUpdate is sneaking in first, while loading is still false.
2. Updating props
this.props.selected.moviesList = moviesListNames;
Components should never, ever, update their own props. Usually, this would be stored in state instead.
For more details on this, read this section of the docs and this answer.
3. Importing axios, but not using it
import axios from 'axios'
This one isn't really an issue (other than an unused import), and might just be preparation for where you're heading. axios gives a much nicer developer experience than XMLHttpRequest (in my opinion) for http requests and will clean up the fetchData function a lot, which will make troubleshooting easier.
I hope this helps a bit, and you're enjoying React. Feel free to follow up on any of these points in the comments or as new questions.