How can i auto refresh or render updated table data form database in material UI table after doing any operation in React?

Here useVideos() give us all videos form database. After adding a new video the new entry is not append in the Material UI table , but if I refresh the page then it’s showing that new entry. Now I want to show this new entry after add operation. Please help me to do this! Thanks in Advance.

const initialState = [{}];
const reducer = (state, action) => {
  switch (action.type) {
    case "videos":
      const data = [];
      let cnt = 1;
      action.value.forEach((video, index) => {
        data.push({
          sl: cnt,
          noq: video.noq,
          id: index,
          youtubeID: video.youtubeID,
          title: video.title,
        });
        cnt = cnt + 1;
      });
      return data;
    default:
      return state;
  }
};

export default function ManageVideos() {
  const { videos, addVideo, updateVideo, deleteVideo } = useVideos("");
  const [videoList, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    dispatch({
      type: "videos",
      value: videos,
    });
  }, [videos]);

  const columns = [
    { title: "Serial", field: "sl" },
    { title: "Title", field: "title" },
    { title: "Number of Qusetion", field: "noq" },
    { title: "Youtube Video Id", field: "youtubeID" },
  ];

  return (
    <div>
      <MaterialTable
        title="Videos Table"
        data={videoList}
        columns={columns}
        editable={{
          onRowAdd: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                addVideo(newData);
                resolve();
              }, 1000);
            }),
          onRowUpdate: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                updateVideo(newData);
                resolve();
              }, 1000);
            }),
        }}
      />
    </div>
  );
}

Answer

Since the information provided is a bit lacking, I’ll assume that the useEffect hook is not working when you update your videos (check it with consle.log(“I’m not working”) and if it does work then you can just ignore this answer).

You can define a simple state in this component, let’s call it reRender and set the value to 0, whenever the user clicks on the button to add a video you should call a function which adds 1 to the value of reRender (()=>setReRender(prevState=>prevState+1)). In your useEffect hook , for the second argument pass reRender. This way, when the user clicks to submit the changes , reRender causes useEffect to run and dispatch to get the new data.

If this doesn’t work , I have a solution which takes a bit more work. You will need to use a state manager like redux or context api to store your state at a global level. You should store your videos there and use 1 of the various ways to access the states in this component (mapStateToProps or store.subscribe() or …). Then pass the video global state as the second argument to useEffect and voilà, it will definitely work.