This is more of a Layout thing where in our layout we all have header section and the main content section and a footer. We will learn to develop buttons in our header which will work on all the routes of our application, all the forms, route components of our application. We know that when routes change header and footer remains the same and only the main content change., ie the component changes.


# We will learn to use **createContext**, **useRef**, **useImperativeHandle** along with similar funtionalities.

Before starting to code here is the overview - 

- For the common Save button (from header) to work on all routes, forms, components, we will have to create and pass a Ref from layout page to each component page (each form) so as to indentify the current form which is done by ref.current
- This ref will identify the current form as per the route and then we can directly trigger the **form onSubmit** function from the header section.
- The current form is recognized by ref.current
- And we can call ref.current.submit function to trigger form onSubmit function.
- For the delete functionality we will create and pass a different ref because here we dont want to access a form method directly (as onSubmit in above case), but just to have other function of the component, form controlled by the header menu button.
- We can create multiple button for functions related to a form based on this delete button fuctinality and all will work the same way. for example to update, to delete, to refresh or for anything common in all forms. 
- When the common funtionality is not required in any form, we can also disable the header button for that specific form. 

I'm using React 19 in my example - 

### App js -
First we will create two refs - 

```
function App() {
  const saveRef = useRef<any>(null);
  const imperativeRef = useRef<any>(null);

```
and two functions for the button - 

```
  const saveThis = () => {
    saveRef.current.requestSubmit();
  };
  const deleteThis = () => {
    imperativeRef.current.deleteChild();
  };

```
and then a ref object - 

```
  const refs: any = { saveRef, imperativeRef };

```

We have to pass this ref to all of our child component and for the same we will create a **Context**

In a  new file we will create our context - 

### In file myContext.tsx

```
import { createContext } from "react";
export const RefContext = createContext(null);
```

### Back in App.js

We will import the  context and then pass this context to everywhere in our app, 
 
 then we can create the header buttons in app.js file 
 
```
<button className="bg-[#d9d9d9] px-3 rounded" onClick={saveThis}>
  Save
</button>
<button className="bg-[#d9d9d9] px-3 rounded" onClick={deleteThis}>
  Other Functions
</button>

```
 the button on click will target the above functions create which will  target the ref.current, the ref.current will be of the form instance currenly  based on the route.
 
Lets  us now create Routes for our app, using react-router-dom 


```
  const Routerr = createBrowserRouter([
    {
      path: "/first",
      element: <First />,
    },
    {
      path: "/second",
      element: <Second />,
    },
  ]);

```

Here, First and Second are my two forms components that I will show how common button works.

So the complete App.js will look like - 


```
import { useRef } from "react";
import { RefContext } from "./myContext";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import First from "./first";
import Second from "./second";

function App() {
  const saveRef = useRef<any>(null);
  const imperativeRef = useRef<any>(null);

  const saveThis = () => {
    saveRef.current.requestSubmit();
  };
  const deleteThis = () => {
    imperativeRef.current.deleteChild();
  };

  const refs: any = { saveRef, imperativeRef };

  const Routerr = createBrowserRouter([
    {
      path: "/first",
      element: <First />,
    },
    {
      path: "/second",
      element: <Second />,
    },
  ]);

  return (
    <div>
      <div className="flex gap-x-2 bg-[#bae7ff] py-2">
        <p>header menu set in layout</p>
        <button className="bg-[#d9d9d9] px-3 rounded" onClick={saveThis}>
          Save
        </button>
        <button className="bg-[#d9d9d9] px-3 rounded" onClick={deleteThis}>
          Other Functions
        </button>
      </div>
      <RefContext.Provider value={refs}>
        <RouterProvider router={Routerr} />;
      </RefContext.Provider>
    </div>
  );
}

export default App;

```

You can see the headers will have common button and when route changes only the component based on route will change. 

We also wrapped our RouterProvider with our Context data, this is done to get the ref values in all of our route segments (in all our forms, components)

### Next we will create our First and Second Component 

Our first and second forms component will look like this- 

![Screenshot from 2025-09-30 06-07-59.png](https://api.ranuvijay.me/uploads/Screenshot_from_2025_09_30_06_07_59_6a18d99570.png)

### file First.tsx

We will ue the context created in our layout (that is main.tsx) file, the context carris the data of the ref, then we will assign the value of components's form ref as saveRef. We will get saveRef by destructuring the context. 

The forms onSubmit function will be called from header by using - 
```
    saveRef.current.requestSubmit();
```
This requestSubmit function from header with the help of ref will call the onSubmit function of the form.  

```
import { useContext, useImperativeHandle } from "react";
import { RefContext } from "./myContext";

export default function First() {
  const { saveRef, imperativeRef } = useContext<any>(RefContext);
  const formDeleteId = "123";

  const onFormSubmit = (e: any) => {
    e.preventDefault();
    console.log("first save");
  };

  useImperativeHandle(imperativeRef, () => ({
    deleteChild: () => {
      // deleteFRomDataBaseFunction(formDeleteId);
      console.log("formDeleteId", formDeleteId);
    },
  }));

  return (
    <div>
      <p className="py-6"> This is my first form</p>
      <form ref={saveRef} onSubmit={onFormSubmit}>
        <label>First Name</label>
        <input
          type="text"
          id="fname"
          name="fname"
          className="bordered border-2 border-[#000]"
        />
        <br />
        <label>Second Name</label>
        <input
          type="text"
          id="fname"
          name="fname"
          className="bordered border-2 border-[#000]"
        />
      </form>
    </div>
  );
}


```

the same will be for the second.tsx file also, I hope you can write that yourself. 

**saveRef** from App.js is used to map against the onSubmit function of the form and for delete we are using **useImperativeHandle** function of the react. 

this useImperativeHandle funtion or our second function can be used for many other things for the app, for example to refetch the data, update the form and here in my case I have shown the example to delete the form instance .

If we click the save button from the header then the onSubmit function of the form will be called. 

and if we click the Other Button from the header our delete function will be called. 

As you can the delete function can take the form instance {id} from the page (which I have not showed here, and manually put an Id) and so clicking the header will call the delete function. 

Thats all for now!

Thanks

We will create two buttons in the header section of the layout, when the route changes, these buttons will work for all the routes, route component and forms using useRef, useImperativeHandle, Context and createContext

Single Save, Delete button for multiple routes, Components, Forms in React.Js

Contact Me

I want to hear from you