React: update state array in setInteval - javascript

I'm trying to build a simple webapp that will have a list of patients, displaying their vital signals values (such as heart rate, spo2 levels, etc...): Im using react for the frontend and Im trying to use setInterval to update said values periodically. However Im having some trouble with that, the list of patients in state is updated, but the new values are not displaying.
I already tried something similar, just like below and this one works fine, so im really clueless about what the problem might be:
Edit: I can see that the state is updated in the console.log, I just cant get those values to be displayed on the screen each second

As you are getting patients details from api already you can directly update state like this, no need to maintain separate array for that.
.then(res=>{
this.setState({patients: res.data.patient})
})

Related

How to solve concurrency issues in a React Native application?

Let's add a <FlatList/> into our application.
The first requirement we have is to render a predefined set of 5 items. We define a constant in our component, pass it into the list via the data prop and it works just fine...
... until we decide to store this data on a server and expose it via the API. OK, no problem, will fetch the data in our componentDidMount() method, put it into the state when it finishes loading, pass the state to the data prop and it also works just fine...
... until we notice that we have a huge delay before we can show the first item of the list. That is because the amount of data we're loading from the API grew significantly over time. Maybe now it is some REST resource collection consisting of thousands of items.
Naturally, we decide to implement a pagination in our API. And that is when the things start to get interesting... When do we load the next page of the resource collection? We reach out to the wonderful React Native API reference, examine the FlatList part of it, and figure out that it has a very handy onEndReached callback prop. Wonderful! Let's load the next page of our collection every time this callback is called! It would work as a charm...
... until you receive a bug report in your mail. In this report a user tells us that the data is not sorted properly in the list, that some items are duplicated and some items are just missing.
After a quick debugging we are able to reproduce the issue and figure out what causes it. Just set the onEndReachedThreshold = { 5 } and scroll the list very fast. onEndReached callback would fire asynchronously before the previous one has finished.
Inside our component, we have a variable pageId storing the last page ID we loaded. Each time the onEndReachedThreshold gets fired we use it to construct the next page URL and then increment it. The problem is that this method is called concurrently and the same value of pageId is used multiple times.
I used to do a bit of multithreading programming before, I've heard of mutexes, semaphores, and atomicity. I would like to be able to acquire an exclusive lock on the pageId to use it in this concurrent callback.
But after a quick Internet search, it seems that JS does not provide such tools out of the box. I found some libraries like this one but it doesn't look like a good candidate for a dependency, it's not very actively developed, it's not made by a major vendor etc. Looks more like some hobby project.
The question is: what are the industry-standard rock-solid tools or patterns for thread-safe React Native programming? How can I solve the described concurrency issue in a React Native application?

How to show complex object properties from an API call in React

So I've been working on making a Recipe App on react. I've taken data for this app from https://www.themealdb.com/api.php on this site. I've been able to show Meal Names by search and also if I want to specific details about a meal I've been also able to do it but in this API there's a complex piece of data which show all the ingredients and measurement. I've tried for a long time but couldn't able show the measurements and ingredients of the meal. I am attaching the response of the ingredients and measurements.
As you can see there are null values in both Ingredients and Measure. I can show both of these if I call them by numbers for ex - strIngredient1,strIngredient2, and so on. What I want I do is I will take all the Ingredients and Measure and whenever there is a null or empty string it will not show it in the details of a specific meal. How can I do it using React Hooks?
This doesn't really have anything to do with React.
You can test for a truthy (something that resolves to true) in JS with the following:
if (x) { }
Empty strings will not get into that, neither will undefined or null. Just check each value to see if you should add it to the UI and you'll be good.

Is it a good idea to create fields through a database

I'm a novice react developer working on a project, and was wondering if I could get some advice. This project is essentially converting a very complicated and large spreadsheet into a nice application. I'm also using material-ui for some of the components. The reason I'm here is because the way I currently have my fields set up feels wrong, and I was hoping some more experienced people could weigh in.
Essentially, I have all the data that creates each field in a psql database table (see the fieldData variable in the codesandbox) . I pull that data in via useEffect and axios, and run it through a function which outputs the fields (63 at the moment). I also have a reducer which controls the state of the components so I can add them together, and submit the data to the database, which I haven't implemented yet.
The reason I am running it through the database instead of just creating each component individually is so that later on, you can change/add fields from inside the application instead of having to edit the javascript. However, it feels like this is inefficient, or there's a better solution that I'm missing. I appreciate any help or feedback, thanks!
Codesandbox: https://codesandbox.io/s/adoring-dewdney-xx8w4?file=/src/App.js

Using mutationobservers to detect changes in the results of a fetch request

I'm working on a narrow cast that displays an amount of tickets (an integer with the total added up to eachother) from a 3rd party API. I want to display a notification when this amount increases. I've read about mutationobservers, and that they are good for doing similar tasks like when something gets added or deleted.
The app has a Vue frontend, and a Laravel backend which does the requesting/authenticating. The index blade loads in a Vue component which contains the other components (and distributes the data from the API to child components).
I'm not quite sure wether mutationobservers are good for this specific job, though. Googling really didn't give me great alternatives.
In conclusion, I want to know if mutationobservers are the right tools for this task and what property would work. Better suited alternatives are also welcome.
Using vue, you can use a watcher function to watch for changes in a particular variable (amount). Mutation Observers only watches for dom updates, it won't give you what you want

Multiple render variants with React?

I've built a web application using React which is up and running and working well. I should probably just leave it alone, but there's one area which is troubling me, where I think I need to do a bit of refactoring because what I'm doing doesn't seem to me to be going with the flow of React. I'd be interested in others' views.
I have a React class, Product, which I use to keep track of products on the page. The only property stored in state is 'quantity', but I have various functions which do things like update a basket by means of pub/sub. Depending on how and where this Product class is used (whether in a table or for a detail view, whether on mobile or desktop), the necessary display is quite different. So in my render function, I call variously 'renderForDetailOnMobile', 'renderForTableOnMobile', 'renderForDetailOnDesktop' and 'renderForTableOnDesktop'.
As I say, this doesn't feel very React-y to me, as if I've got the whole thing upside down (although the rest of the app is, I would say much more idiomatic). So how should be thinking this through in order to break it down into separate smaller classes, which is what I imagine I should be doing? Sorry, for privacy reasons it's not possible to poast actual code, so I hope this description makes the situation clear enough.
You should be using reducers or stores, depending whether you have a flux or redux application. This would help you to understand your state and how it changes.
I see you are using state in your Product, while you should be using stores as mentioned above.
So, how I see the issue is that you have data source and you need to transform it based on the device requirements.
In such case I would make a container which would load other components in charge of transforming and presenting data for different devices.
Container should be rather simple just returning the correct component based on the conditional being met.

Categories

Resources