How should I improve this behavior in React?

Question

in my company we are using ReactJS to develop our website. We also have legacy code in jQuery (I know, we are trying to change everything to React). My problem is that we have some global functions that we have to pass throughout all the component tree. For instance, we have a control function that we have to pass throughout 8 components, but only the last one actually calls it.

So, I wonder if there's a way to avoid this problem. Another problem is that we have several react trees on the page, because as I said, we have some legacy code in jQuery. Any ideas/suggestions?

(pls if this question does not belong in this forum let me know)

Answer 1

So you have to create yout context like this:

import React from "react";
 
const YourContext = React.createContext({ func: null });
 
export default YourContext ;

then in your parent component you can initialize it and make it available in child components:

import React from "react";
import YourContext from "./YourContext";

const YourParentComponent = () => (
    <YourContext.Provider value={{ func: () => {} }}>
        ....
    </YourContext.Provider>
);

and in your child components you can use it:

import React, { useContext } from "react";
import YourContext from "../YourContext";

const YourChildComponent = () => {
  
  const { func } = useContext(YourContext);