I am wondering if anyone has theories on what to try
One of the devs on my team is using wrapped custom HTML components from another team (the wrapper is basically Robin Weiruch's https://github.com/the-road-to-learn-react/use-custom-element except made into Typescript).
The odd behavior is that the 2nd "select" does not follow the first when the checkbox is checked if and only if the 2nd select had been changed. It will follow the first if the first is changed after the checkbox is checked.
I refactored the code from a useState to a useReducer -- as the wrapped components update, they do cause subsequent change events (and extra dispatch calls) except in the problem scenario [the change event doesn't fire the first time -- it's like its stuck in a debounce]
any theories on what to try?
thanks
useCallback with a warning suppression worked
A better way of dealing with an external component that misbehaves on its understanding of state is still desirable
Related
I'm working with a form that may be a bit over-engineered, and I'm trying to write a script to step through the form and submit it. Most of the form is pretty hackable, but there's a 3-part date input which is just not responding to my attempts to manipulate it programmatically.
The date field works, if I click or tab to it and begin typing. But if I manually dispatch events, even ones that are identical to what it receives when I type and have exactly what the code seems to be looking for, I can't get it to hold onto its values and perform validation. I've tried a lot of variations of this. I've tried manually dispatching a custom event that matches a custom Vue event it should be listening for.
Is there a way to instead manipulate the data of the Vue component directly? To force it to have a certain "monthValue" for example, without intermediate events? I don't expect that there is, but hopefully I'm missing something. Please note that I do have the ability to refactor the form, but that should be an absolute last resort.
As far as I can tell, no, there isn't a way to do this. But it wasn't necessary.
The solution involved being more careful in looking at what the components were actually trying to do. In this case they were input elements using v-model, which is shorthand for a combination of #input (event listener) and :value attributes[1]. This meant that dispatching synthetic input events with the correct data attribute could convince Vue to accept the value and retain it (whereas any value dispatched in any keyboard event would be ignored entirely). This only addressed half of my problem with this particular form, but it is the correct solution for the question asked.
[1] https://vuejs.org/guide/essentials/forms.html
I have a couple set states on providers that trigger a bunch of effects throughout my react app. They happen back to back in a hook. The second set state has some effects that it triggers that need make sure that the first hook fully propagated through the app. Currently the first one has not made all the required changes so some functionality triggered by the second causing weird behavior. How do you ensure that the second one only happens after the first is fully propagated?
setSomeStateValue(x);
setValueToTriggersEffectsThatRelyOnUpdatesFromTheOther(y);
Here are some thing I have done that work but have their issues:
1.) settimeout(...,0)
setSomeStateValue(x);
setTimeout(otherSetState,0);
This pushes the second one to a subsequent batch. I like this one because it doesn't involve adding extra code to watch other state variables that the code maybe shouldn't be concerned with, but it does seem a little black magicy and could possibly cause hard to debug issues.
2.) monitor the stuff i need set before calling the second set state
This one seems a little more readable but involves importing and watching things that might not make sense that they belong in the related code. Basically adding a useEffect that watches everything I need set before the second call happens. Also if something changes in regards to what is needed to have the second call ready then this code will have to change as well where as the first solution should not require an update.
Both of these work but have their fallbacks. I would like to refactor the second call to account for these issues but that would be too large of a refactor at this point too make it a feasible option. Is there a native way to ensure this or another strategy here that I am missing? And if not, which one of the above solutions is better?
In such situations where a setState is dependent on a previous setState or a specific state of the component, you can potentially do two things. First,
use the second argument of setState. Here, callback is only invoked once setState is done updating the state. Hence you can get the desired synchronous behaviour.
setState(updater, [callback])
Use componentDidUpdate lifecycle method ( For Hooks, it would be just another useEffect ). If you don't want to have complex setStates in your component, simply have an effect with a dependency on the needed state and do your operations there
React.useEffect(() => {
if( desired_state){
secondSetState()
},
[ desired_state ]
}
I am trying to understand more about React, so I did some very simple test.
I know my test is NOT react way of doing things, but since it is still Javascript, I am just testing how everything is working for curiosity.
I declare a variable outside of react component, and every time the function component renders it will add 1 to the variable.
I activate the re-render by using a button, the button will activate an increase function then use a setState thus cause the component to re-render.
What I notice is the a variable is adding 1 twice, I put 2 console.log before and after it to monitor it. I can see there is one execution of adding, but where it the other adding coming from? The afteradding after rendering should be the same of next round's value before adding.
See the code, thanks in advance for any deeper understanding.
Thanks for the help, after removing the strictmode, app is behaving normally now.
Today,I tried to make a list with redux where you can add and remove elements as you want visible here. My list is in fact an array updated every time user click on "Add to the list" or "Remove last added element".
Now I try to do one thing but I don't know how to do it. Indeed I what I wanted to do is, if for example the user try to add Tristan again, the FromControl with Tristan became 'sucess' (I use bootstrap too) but I don't know how to reach this element precisely, because if I used a variable in my reducer and i said the style of my FromControl depends of the state of this variable, every FormControl will become 'sucess'.
Thanks in advance for your help :)
(Sorry for my english level too)
You can use Array.prototype.findIndex() to get the index of the element in your array and work your way up from there.
I see as well that you have a lot of warnings in the console, I suggest you to add the key in your components when inside a foreach and move the setState calls to componentWillMount or another appropriate place.
I'm still running into the same problem, filters and functions inside ng-repeat being called all the damn time.
Example here, http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview, anytime you change something on a single row, someFilter filter is called 1000 times.
Apparently it's because any change on a child scope bubbles up to its parent, causing $digest to run, causing all filters to run(https://stackoverflow.com/a/15936362/301596). Is that right? How can I prevent it from happening in my particular case?
How can I make it run only on the item that has changed?
In my actual use case the filter is called even when the change is not even on the items of ng-repeat, it's so pointless and it is actually causing performance problems..
// edit cleared all the unnecessary stuff from the plunker
http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview
This is just how Angular's dirty checking works. If you have an array of 500 items and the array changes, the filter must be reapplied to the entire array. And now you're wondering "why twice"?
From another answer:
This is normal, angularjs uses a 'dirty-check' approach, so it need to call all the filters to see if exists any change. After this it detect that have a change on one variable(the one that you typed) and then it execute all filters again to detect if has other changes.
And the answer it references: How does data binding work in AngularJS?
Edit: If you're really noticing sluggishness (which I'm not on an older Core 2 Duo PC), there are probably a number of creative ways you can get around it depending on what your UI is going to be.
You could put the row into edit mode while the user is editing the data to isolate the changes, and sync the model back up when the user gets out of edit mode
You could only update the model onblur instead of onkeypress using a directive, like this: http://jsfiddle.net/langdonx/djtQR/1/