Figuring out state management with React Context API
The deadline was coming to a close as we were adding the last few features we needed for the Xcel work order ticketing project. I had built out the card components and forms so that the user will be able to input their work orders. After having these components built out we had to make a new page where we would bring all the components together to create a dashboard. This is what we had.
While working on the project, the team and I were finding it hard to configure our state management. We only had a few days left to come up with an MVP so we were a bit restricted with time. We discussed many possible ways we can handle our state management so that we would not have to keep prop drilling in order to pass down the state we needed to a specific component. At first, we discussed using redux but then after a few hours of planning it out and trying to configure it for our project we realized that it would be too much work for this project. This is what we had:
as you can see we are passing in a lot of props to this WO form when it should just be pulling this information from our initial state. Our solution was to use context API. With context, we were able to create a file where we can store our initial state and then have specific components access this state without the need for prop drilling. All we needed to do now was just provide the state to the components that were consuming them and that was done by using the useContext hook. This approach solved our state management problem and cleaned up our code.