React Context для передачи массива

Возможная реализация с контекстом:

//context.tsx
import {
  createContext,
  ReactNode,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react';

export interface LibsAndComponentsInterface {
  data: unknown[];
}

const LibsAndComponentsContext = createContext<
  LibsAndComponentsInterface | undefined
>(undefined);

// Wrap your App component with this
export function LibsAndComponentsProvider({
  children,
}: {
  children: ReactNode;
}) {
  const [libs, setLibs] = useState<unknown[]>([]);
  const [components, setComponents] = useState<unknown[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const libraries: unknown[] = await sendRequest('/libraries');
        const softwareComponents: unknown[] = await sendRequest(
          '/softwareComponents'
        );

        setLibs(libraries);
        setComponents(softwareComponents);
      } catch (err) {
        console.error(err);
      }
    };
    isAuthenticated() && fetchData();
  }, []);

  const ctxValue = useMemo(
    () => ({
      data: [...libs, ...components],
    }),
    [libs, components]
  );

  return (
    <LibsAndComponentsContext.Provider value = {ctxValue}>
      {children}
    </LibsAndComponentsContext.Provider>
  );
}

export function useLibsAndComponents() {
  const ctx = useContext(LibsAndComponentsContext);

  if (ctx == null) {
    throw new Error(
      'useLibsAndComponents must be inside LibsAndComponentsProvider'
    );
  }

  return ctx;
}

// later in your components

 const { data } = useLibsAndComponents()

Вот полная настройка React Context. Пожалуйста, используйте машинописный текст, если это необходимо.

MyContextProvider.js

const { createContext, useState } = require("react");

//Create a context
export const Mycontext = createContext();

//Created a component that helps to provide the context.
const MyContextProvider = ({ children }) => {

  //Declare all the states that you need
  const [libraries, setLibraries] = useState([]);
  const [softwareComponents, setSoftwareComponents] = useState([]);

  return (
    <Mycontext.Provider
      //provide all the state, function as value that you need in any child component 
      value = {{
        libraries,
        setLibraries,
        softwareComponents,
        setSoftwareComponents
      }}
    >
      {children}
    </Mycontext.Provider>
  );
};
export default MyContextProvider;

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import MyContextProvider from "./MyContextProvider";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
//Wrap App component By the MycontextProvider component
root.render(
  <StrictMode>
    <MyContextProvider>
      <App />
    </MyContextProvider>
  </StrictMode>
);

App.js

import { useContext } from "react";
import ChildComponent from "./Child";
import { Mycontext } from "./MyContextProvider";
import "./styles.css";


export default function App() {
  //This is the way of getting value from context here useContext is the builtin hook and Mycontext is the context name
  const { setLibraries, setSoftwareComponents } = useContext(Mycontext);
  //After getting data from API use setLibraries and setSoftwareComponents to store data in the state(context) instead of local storage.
  
  return (
    <div>
      <ChildComponent />
    </div>
    
  );
}

Ребенок.js

import { useContext } from "react";
import { Mycontext } from "./MyContextProvider";

const ChildComponent = () => {

  const { libraries, softwareComponents } = useContext(Mycontext);
  //Here is your state you can use it as your need.
  console.info(libraries, softwareComponents);
  
  return <h1>Child Component</h1>;
};
export default ChildComponent;