Should/Can I organize data in React? [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Should I organize data in my React app or have it organized before react accesses the data?
I currently have an app that gets data from an API, in this case a list. I want to iterate this list and count how many items there are in each value range. The final goal is to create a histogram. Should this data already be in the proper format before being saved to the api?
const Histogram = (props) => {
const data = props.data
const max = Math.max(...data)
const min = Math.min(...data)
for (var i; i<data.length; i++){
var value = data[i]
//logic to count how many in each value section
const chunk1 = numberInChunk1
const chunk2 = numberInChunk2
//create histogram
}
}

Question is too broad but if you are asking about the application architecture than you should just follow a simple rules of the data separation and abstraction.
You API should be frontend independent and abstract as much as it's possible. Sometimes it's hard to achieve such separation because of the business needs, performance, legacy code and etc. But if you are implementing new application, than try to think what can be reused and what is strictly UI responsibility? If it's a heavy computation, than probably it's an API responsibility.
But also ask yourself a question whether you can
reuse this data in another application if it will prepared on a server side?
What if stakeholders will ask you to change react component and display this data in another format, can this lead to another change on server side?
If answer is yes, than your API is not abstract enough to handle various usecases.

Related

What is the correct way to hold dynamic strings in a constant file in React? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last month.
Improve this question
I am working on a fairly large project and I want to make some changes to the code base to support internationalisation in the future. I have stored most strings in a separate file. But is there a good way to store dynamic strings in React?
Using interpolated strings it is very hard to store in constant. I tried using functions and string interpolations but I feel this is not the correct way.
Some things that I tried:
const STRING = (context: string) => `This is a ${context}`
const STRING2 = `This is a ${context}`
But in second approach we need to have the context defined somewhere and maybe it needs to be passed in the translations file itself.
For context, I am using TypeScript and I am planning to use React i18n for internationalisation.
I tried splitting the dynamic strings in separate constants which work, but is very inefficient especially while translating.

How to perform delete operation? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 months ago.
Improve this question
For a production level web app, How anyone should perform a delete operation. Like if we have stored an array of products in global store(eg. Redux) on the client side. Now I perform a delete request to the backend to delete a product with id "001". Now should I get an updated list of products from the backend to display or I should just filter out the globally available state from the store?
I want to know the optimal way.
Do Post Request with id to an api to delete. Get that id in backend delete it and then return updated records as result
If you are building something like an e-commerce website you probably shouldn't store a copy of data about all your products in Redux.
If you store data about products on server you can use library like React Query to fetch it to display on client or mutate data stored on server(delete for example). React Query also has cashing for optimisation so you don't fetch data on every render. You can think of it as synchronization of your server and client state.
Redux is used to store client state like products in cart. You can use redux when you create data on client and manipulate it while it is stored in redux. Then you can send it to server when needed.
There is a great video about server state and client state with explanation and coding examples: https://www.youtube.com/watch?v=5-1LM2NySR0&t=891s&ab_channel=Theo-ping%E2%80%A4gg

Generate fake data that don't change [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm creating a temporary GraphQL backend, that should serve mocked data.
E.g. I need ~500 objects of the model Person (with firstName, lastName, email, country, etc), where the properties shouldn't change on each request.
Is there any library where it's possible to get fake data always created in the same order?
You can easily create your custom JSON with https://next.json-generator.com/ which allows using internal scripts for data generation
Here is an example of generating a list of names: https://next.json-generator.com/Vk95XL5mv
Not sure if this is exactly what you want, but I discovered this site: https://crudpi.io/ this weekend, you can mock some data in a JSON file and use it for your API. I guess that it's limited to 100 objects or something, but if you need the same data, you can copy it 5 times I guess. Hope it helps!
I wish that I could write this as a comment but I don't have enough reputation yet.
Here's an API. https://uinames.com/api/?amount=500
You should easily just create a script, add the data you got from this to a temp-database.
You can use a generator like https://randomuser.me/
Make a loop to create your object then keep the result in a file to ensure the data will be the same.
You can get an exemple here : https://gist.github.com/Yexan/cb8b79390e01272a4912fb4d6773ee1a
I used https://randomuser.me/api/?results=500

Best way to parse URL in ES6 [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I've seen some legendary questions about the topic like that: how to parse a url .
But years passed and things changed. The answers from questions that I can find is out of date.
I don't want to parse URL via regexp or some hack like creating HTML node as a parse helper. I want some flexible method that returns an object with all required data from the URL.
I believe that there are some new built-in methods to do it or new revolutionary amaizing and simple ES6 libraries for that purpose.
Can you please advice something like that?
I think you are looking for web api's URL() constructor like this:
const myTestURLString = "https://www.youtube.com:8080/watch?v=YaXXXXkt0Y&id=123";
const myURLObj = new URL(myTestURLString );
console.log(myURLObj.protocol);
console.log(myURLObj.host);
console.log(myURLObj.hostname);
console.log(myURLObj.pathname);
console.log(myURLObj.search);
console.log(myURLObj.searchParams.get('v'));
console.log(myURLObj.searchParams.get('id'));
ES6 is part of the language specification, not any particular framework for JavaScript. Therefore, you're not going to find things like URL.parse() in the language.
The APIs you're looking for are part of the host for your application, such as the browser or Node.js. In browser, there is a URL interface: https://developer.mozilla.org/en-US/docs/Web/API/URL

Loading lookup table from server - Efficient Format [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
If I had a python script that created a lookup table which could be read by a webpage (javascript and maybe ajax), what is the most efficient (in speed and if possible size) format to use?
The lookup-table could have 2000 rows.
Here is a data example:
Apple: 3fd4
Orange: 1230
Banana: 942a
...
Even though this is primarily opinion based, I'd like to roughly explain to you what your options are.
If size is truly critical, consider a binary format. You could even write your own!
With the data size you are presenting, we are probably talking megabytes of data (depending on the field values and no. of columns), so the format is of importance. Now, a simple csv or plain text file - provided it can be read by the webpage - is very efficient in terms of the additional overhead: simply seperating the values by a comma and putting the table headers on line 1 is very, very concise.
JSON would work too, but does maintain a somewhat larger overhead than just a raw (text) data dump (like a csv would be). JavaScript object notation is often used for data transfers, but really, in the case of raw data it does not make much sense to coerce it into such a format.
Final thoughts: put it into a relational database and do not worry about it any more. That is the tried and tested approach to any relational data set, and I do not really see a reason you should deviate from that format.

Categories