What is the best way to store, read and update large array of objects in react?

Issue

This Content is from Stack Overflow. Question asked by Dimas Rizqi

newbie to react here. I have large array of objects that I currently save as .json file. The size of the file is about 2.5MB and contains fetched data from youtube api. Below is the sample data:

[{
  "kind": "youtube#playlistItem",
  "etag": "5_4yyrIK1DBbcLsSWOgtt5mHQrA",
  "id": "VVVjQWQ1TnA3Zk84U2VlakIxRlZLY1l3LnZmTGRHZGRHd093",
  "snippet": {
    "publishedAt": "2022-08-28T12:30:10Z",
    "channelId": "UCcAd5Np7fO8SeejB1FVKcYw",
    "title": "Central Vietnamese Street Food!! Noodles from Actual Heaven!!",
    "description": "🎥 SECOND CHANNEL!! MORE BEFRS »  n👕 BEFRS MERCH » n💗 SUPPORT OUR MISSION » n📷  CALVIN BUI’S IG » @fkndeliciousness | YouTube: https://youtube.com/c/FKNDeliciousness nnLike our music? Enjoy a free 30-day of Epidemic Sound for the best royalty-free music: http://share.epidemicsound.com/BEFRS n- - - - - - - - - - - - - - - - -  n1. TRADITIONAL CAO LAU NOODLE FACTORY nn🍜CAO LAU NOODLES: Soak the rice for 24 hours then grind it. Cook and stir until thick for 30 minutes.nSteam for 30 minutes. Roll to make it flat and steam. n- - - - - - - - - - - - - - - - -n2. Quán Cao Lầu Bá LễnADDRESS: 49/3 Trần Hưng Đạo, Sơn Phong, Hội An, Quảng Nam 56000nOPENING TIME: 11AM - 8:30PM nn🍜CAO LAU: In a bowl, add herbs, bean sprouts, cao lau noodles, char siu, chả ram, deep fried pork fat (tốp mỡ) then meat sauce.nnPRICE: 35.000 VND / $1.51 USD n- - - - - - - - - - - - - - - - -n3. PHỞ SẮN FACTORYnn🍜 PHỞ SẮN: Grind the dried cassava into powder. Soak the cassava powder and water for 3 days and 3 nights then filter the water out, keeping the cassava powder. Whisk the cassava mixture in a pot for 30 minutes. Smooth mixture out. Place batter in a pressing machine. Dry noodles in the sun. After drying, cut into squares. n- - - - - - - - - - - - - - - - -n4. NHÀ HÀNG CỎ HỒNGnn🍜FRIED PHỞ SẮN: Pestle the pearl onions and place vegetables in hot water. Make the sauce with fish sauce, vinegar, msg, and coconut nectar. In a pan, add peanut oil. Fry the garlic, shrimp, and squid, add sugar, and then the vegetables. Add water and add a little starch. In another pan, deep-fry the pho san noodles. In a bowl, add the fried pho san, sauce, shrimp, squid, and top with spring onions.nn🍜PHỞ SẮN WITH FISH BROTH: Cook snakehead fish broth for 5 hours. Break the pho san into pieces and soak them in cold water for one minute. Place oil in a pot, add in pearl onions, garlic, tumeric, and the snakehead fish, and fry it for 10 minutes. Add in the pork. Pestle the fish. Add in the broth and cookn- - - - - - - - - - - - - - - - -n5. MÌ QUẢNG BÀ LÁNGnADDRESS: Lê Thánh Tông street, An Phú ward, Tam Kỳ city, Quảng Nam Provincenn🍜MÌ QUẢNG NOODLES: Soak the noodles and grind with a machine. Spread mixture on a flat surface and steam. When it’s cool, fold and cut it. nn🍜MÌ QUẢNG: Add fresh mì quảng in the bowl. Add char siu meat sauce. Add char siu and shrimp. Top with the peanuts and spring onions. Add herbs and fresh vegetables. nn#BEFRS #BestEverVietnamFoodTour #BestEverFoodReviewShow n- - - - - - - - - - - - - - - - -n💬COME SAY HI:nINSTAGRAM »  (@besteverfoodreviewshow)nFACEBOOK » n n💗SUPPORT OUR MISSION:nPatreon is a platform that allows people to support creators on a recurring basis. Your contribution is an investment in the creative freedom of my channel and enables me to keep my content authentic and uninterrupted. Your donation allows me the time and resources to create more videos for you. We also have some pretty sweet rewards, exclusive to Patreon Bestys. » n nOur VIP Patrons: Susanne Smarr, Jim Klingsporn, Leo Lui, Sam Cassidy, Venetia Edmunds, Jack Murray, Eimile Nakoma, Jack Li, Stephen Balasta, Louis Chisari, Ryan Rhodes, Paul Citulski, Matthew Holden, David Baliles, Jackson Li, John Logan and Summer & Grayson Stumpf.  n n🥒 ABOUT BEFRS:nHey, I’m Sonny! I’m from the US but I’ve been living in Asia for 10 years and started making food and travel videos to document my experiences. I travel to different parts of the world, hunting down and documenting the most unique food each country has to offer. n nIf you see any factual food errors in my videos, please feel free to politely let me know in the comments. I'm a huge fan of trying different, interesting foods in each country. My show is from a Western point of view, but more importantly, MY point of view. It is not meant to offend any person or culture. n- - - - - - - - - - - - - - - - -n🎬 CREDITS:nHOST » Sonny SidenDIRECTOR OF PHOTOGRAPHY » Nguyễn Tân KhảinCAMERA OPERATOR » Tran Quang DaonVIDEO EDITOR » Thai Do nCOLOR & MASTER » Quí NguyễnnPRODUCER » Nhi HuynhnnSelected tracks via Audio Network nFor business inquiries: marketing@befrs.com",
    "thumbnails": {
      "default": {
        "url": "https://i.ytimg.com/vi/vfLdGddGwOw/default.jpg",
        "width": 120,
        "height": 90
      },
      "medium": {
        "url": "https://i.ytimg.com/vi/vfLdGddGwOw/mqdefault.jpg",
        "width": 320,
        "height": 180
      },
      "high": {
        "url": "https://i.ytimg.com/vi/vfLdGddGwOw/hqdefault.jpg",
        "width": 480,
        "height": 360
      },
      "standard": {
        "url": "https://i.ytimg.com/vi/vfLdGddGwOw/sddefault.jpg",
        "width": 640,
        "height": 480
      },
      "maxres": {
        "url": "https://i.ytimg.com/vi/vfLdGddGwOw/maxresdefault.jpg",
        "width": 1280,
        "height": 720
      }
    },
    "channelTitle": "Best Ever Food Review Show",
    "playlistId": "UUcAd5Np7fO8SeejB1FVKcYw",
    "position": 0,
    "resourceId": {
      "kind": "youtube#video",
      "videoId": "vfLdGddGwOw"
    },
    "videoOwnerChannelTitle": "Best Ever Food Review Show",
    "videoOwnerChannelId": "UCcAd5Np7fO8SeejB1FVKcYw"
  },
  "contentDetails": {
    "videoId": "vfLdGddGwOw",
    "videoPublishedAt": "2022-08-28T12:30:10Z"
  }
},
{
'other objects of similar data'
}
]

From the array of objects, I want to extract the address from snippet.description and geocode it to get x, y coordinate of said address to then visualize it in a map (I can do this part). However, I want to continuously/ periodically fetch data from youtube api again and update the array of object to add address and coordinate data. My current solution to do it is:

  1. Read the .json file
  2. Parse it
  3. Fetch data from youtube api to update array of object
  4. Extract address
  5. Geocode address
  6. Assign address and coordinate to object
  7. Write and overwrite updated array of objects to .json file

For a web app built with react, does this method is a good method in terms of performance? Or is there a better way to achieve this. Thank you in advance!



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?