How to initialise data to different components in React

I am learning React and trying to complete some Frontmentor advance projects.

I am building a movie app with different pages like a home page that list all the movies, a movie page that list only the movies, a TV Series page and a bookmarked pages. Also a json data provided.

The json data has this kind of structure.

 {
    "title": "Beyond Earth",
    "thumbnail": {
      "trending": {
        "small": "img",
        "large": "img"
      },
      "regular": {
        "small": "img",
        "medium": "img",
        "large": "img"
      }
    }
    "year": 2021,
    "category": "Movie",
    "rating": "PG",
    "isBookmarked": false,
    "isTrending": true
  },

My question is: What is the best way to manage this json data, as it will be consumed by all the different pages on their initial load ?

Keep in mind that users should be able to change the isBookmarked status when a button is clicked. Should I used, RTK, or context or store in a remote db and manage with React query?

I am using these projects to learn different technologies but want to know the best for each situation.

My initial process was to use a redux toolkit, but later learnt that reducers should be pure. Also thought about creating a database for the data in supabase but ran into problem on how to create the db with this data structure.

I currently have a local storage hook that loads to that to local storage and can return the value and setValue for the movies. But don't know how that can be consumed by all components

One thing you can do is to create a context that can be used to easily pass the data to all the components

A context is created like this :

const MoviesContext = createContext({});

export function MoviesProvider({children}) {
  const [movies, setMovies] = useState([]);

  // Here you put your method to fetch the movies. It is just like
  // doing it in a classic functional component

  //  I didn't see any id in your json, but it is better to use 
  // id instead of index
  const bookmark = (index) => {
     const clone = structuredClone(movies)
     clone[index].isBookmarked = !clone[index].isBookmarked;
     setMovies(clone);
  }
  
  return (
    <MoviesContext.Provider value={{movies, bookmark}}>
      {children}
    </MoviesContext.Provider>
  )
} 

Then you wrap your parent component with the provider. Every component using the context should be called as a children of MoviesProvider

<MoviesProvider>
  <Content />
</MoviesProvider>

Note that if you use react-router and all your pages will need the context, you can put <Routes /> as a child of <MoviesProvider />

And then, in every child components, you will have acces to the context with the useContext hook :

const {movies, bookmark} = useContext(MoviesContext);

You can also create a shortcut in your context file

export const useMovies = () => useContext(MoviesContext)

So you just have to call it that way

const {movies, bookmark} = useMovies()

And that's it !

You can also pass props to the provider if you want to initialize some values from above.

Context in React are very useful so if you want to learn more i suggest you read the documentation :

• useContext
• Passing Data with context

Also don't hesitate if you have any question, or if my answer doesn't go far enough

if you wanna haved data to diffrent componets .

you can context , redux-toolkit , zustand , and other ..

what tools is better ? this your qustion .

this deppend for project ..

if you need handle so much api and diffrent api or data you redux-toolkit is good option .

if your project is not big project just simpel or medium project useContext is good option .

deppend on your project .

for work with api :

react-query is good option .

if you have redux-toolkit in your project you can use RTK-Query .

other option is axios can help you for manage api