« first day (4814 days earlier)      last day (359 days later) » 

15:04
Hello. Sorry to bother you folks. Anyone here familiar with React wanting to spare some time for a question? I saw some answers on the main site that seem quite wrong...
15:14
o/
oh, volunteers.
So. Simple question: suppose you have an async api call and want to show a loading message during the call.
Most will tell you to "just set a state variable before and after the call, then do some conditional rendering based on that"
Which brings us to this answer for example
2
A: How to set a loading state for react component while sorting and filtering data?

Raghvender KatariaIn your render method you can have one loader implemented like <Loader visible={this.state.visibility}> In your searchData method, you can set the visibility of this loader true in the first line and false in the last line like below searchData = () => { // Start the loader this.setState({ ...

but... isn't .setState... you know... asynchronous too?
i don't recall if it is, but, if their // do all the things includes awaits, and this is within an async function, it'd be fine
the answer's function isn't async... so... either that's a minor bug with their answer or it's incorrect
@KevinB it can not. .setState does not return a promise, so there is no way for the caller code to even know the operation is delayed
it doesn't have to
awaiting anything else within the function would also allow time for the two setstates to be delayed enough for a loader to display, and then hide
i feel like there's really not enough information in the question or the answers in this case
i don't like that they're calling what is presumably an async action inside their render method either,
and if it isn't async... then wtf are they doing with a loader
15:28
@KevinB not what I mean
@SPArcheon Please don't post unformatted code - use the up arrow to edit your post, then hit Ctrl + K to format the code in that post. See the faq. You have 25 seconds to edit and format your message properly before it will be removed. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it.
For posting large code blocks, use a paste site like like gist.github.com, hastebin.com, pastie.org or a demo site like jsbin.com
I'm not really into React but from what I know - I don't think it should matter that setState doesn't return a promise. It's just updating the state of the application. You're not supposed to wait for it to finish. Update the state as needed (e.g., add data, set a flag) and when the next state update happens (e.g., another setting of a flag), it renders whatever the state happens to be.
that's correct,
searchData = () => {
  // Start the loader
  this.setState({
    visibility: true,
  });

  //  ....Your logic goes here

  // Stop the loader
  this.setState({
    visibility: false,
  });
};
ok worked this time
15:30
:56957608 That should probably be something like
setState({loading: true});

fetch(/* search here*/).then(() => setState({loading: false}));
Maybe I am missing something but...
if it were instead, say...
There is something about useEffect in React and it's related to async (or other things) but I'm not super sure how it's to be used.
If the .setState operation is asynchronous as they claim, what does guarantee you that the two operations will be performed in that order?
It might be more appropriate for similar operations.
15:32
searchData = async () => {
  // Start the loader
  this.setState({
    visibility: true,
  });

  //  ....Your logic goes here
  const theData = await fetchData(whatever);

  // Stop the loader
  this.setState({
    visibility: false,
  });
};
In the code above, what makes you sure that the visibility will be set true and then false instead of false and then true?
the second setState wouldn't be called until after the data has been fetched, which 9 times out of 10 (well, far more often than that) would be after the initial state was sent and the page was rendered
because http requests take a lot of time, comparatively to an "async" action that is just running on next tick
@KevinB yes, but this just because you assume the wait is long enough.
@SPArcheon It's async in that it would be resolved at a later render cycle. It's not random, though. React should be waiting to collect updates and process them all at once. Rather than update one button -> render -> update one checkbox -> render -> update one text -> render. When all of these updates happen essentially simulaniously. That's why it's async
it's.. one of those weird things in js where something is called async that isn't... it's side effects are async
;)
15:36
@VLAZ if you are setting the same flag on the state the order does matter. In the correct order you will display the loader and then make it invisible. It the two assignments are performed in the wrong order then you hide an already hidden loader.. and then you make it visible forever. Forget the fact that the logic should "take enough time to let the previous .setState complete"
searchData = () => {
  // Start the loader
  this.setState({
    visibility: true,
  });

  // Nothing done here

  // Stop the loader
  this.setState({
    visibility: false,
  });
};
setting state is synchronous, but it doesn't immediately cause a render, the render happens with the next render cycle. If both setStates occured within the same function, the side effects of the first will never be seen.
@SPArcheon As I said, I don't know React. But from what I know of React and JS/frontend in general, I see no reason that updates would be done in random order.
aka, in this case, the loader would never be seen
@KevinB It is not!
Async for React is "next render cycle". Not "at some indeterminate point in the future".
15:38
not to be confused with the browser's render cycle
lol
Well, similar idea but yes. Not the same actual thing.
If you do something like setState(true); /* some code */ setState(false) there is essentially two things that can happen: a) both run before React does its rendering. The state is false. b) the state is true, this gets rendered, then at a future render the state is flipped to false. Regardless of what /* some code */ does I don't see a way to process these in a different order or even "back in time" by first rendering the false state, then later the true state.
read this two links
to me these means that you technically can end up with your state set to visibility:true since it could batch the updates in the wrong order
I don't get if it at least maintains an ordered stack of pending updates or not.
I hope this is a bit clearer now.
Maybe worth asking on the site
i don't think that's possible, but, i don't know the inner workings of how react receives and acts on setState internally
I kinda checked out on react around the time they added hooks
The whole point of React is to dispatch actions and process them. Which leads to having completely reproducible behaviour if you record and replay the same actions. I don't see how it'd do anything other than process actions in order.
^
it'd have to go out of it's way to do it out of order
everything that it could be relying on to store up changes to state have an insertion order,
15:48
JS doesn't even have unordered data structures. Even if you use a Set for things that's not your typical HashSet which has random iteration but it's always iterated in insertion order.
it'd be kinda silly for react to then say "lets just randomly pull all these changes and apply them"
there's no potential race condition that i'm seeing
I guess the closest to "non-ordered datastructure" in JS is the WeakMap or WeakSet which cannot be iterated over. With a WeakMap you can only fetch by key and with a WeakSet you can only check if something exists. You can't try to access elements in or out of the order they are kept in the data structure.
@KevinB Would be my guess too, but the fact that they added a version of setState that includes a callback parameter that gets called after the state is actually set made me a tad worried.
but as far as those answers go... i don't like either of them. They both setState twice in a non-async function with little to no explanation about what's going on, and no raised concern about triggering an async action within the render method or questions about whether or not the action is actually async, thus leading to no loader being needed.
¯\_(ツ)_/¯
that function within render should not be async, and should just be synchronously sorting/filtering an existing data set from state and returning it to be rendered directly... but that's not what the OP's code is doing either
well, actually it might be
they're passing the result of this function directly to another component, which presumably is then directly rendering the data
 
2 hours later…
17:55
anyone have experience with network visualization in javascript?
@shintuku Welcome to the JavaScript chat! Please review the room rules. If you have a question, just post it, and if anyone's free and interested they'll help. If you want to report an abusive user or a problem in this room, visit our meta.
am looking for something that would allow me to zoom or center camera programmatically, and would provide tooltips on mousing over, etc.

« first day (4814 days earlier)      last day (359 days later) »