Complex State Management
Tags: react, webdev, ruby, usestate
Published: 2023-03-09 18:00:27

## **So what complicates state management?**

Nested objects created by model associations in your backend of course 🤓! 

It's been several weeks since I started building applications with React, and this last one got a little complicated.  My latest project was constructed with a React frontend and a Ruby on Rails backend.  Setting up the associations of the 3 models for the project wasn't too bad, but utilizing that information in the frontend proved to be quite a bit more challenging.  I found myself in a constant sea of red error messages every time I submitted a form.  Well, it turned out I really needed to backtrack and reinforce my understanding of basic state management before I could manage more complex updates.  

If your models are associated as have_many_through to support a many-to-many relationship, things can get a little quirky.  Let's start with a seemingly simple example.  So, we have a book club app.  It has 3 models: user, book, and comment.  The relationships are as follows:

![User Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cigkyq0dsdpyi5dm9ofr.png)

![Book Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzn7ak8gxbmvg2pi79cm.png)

![Comment Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9igvy9oi10a8355ymj9i.png)

For this project, I used the useContext hook for the first time and it was wonderful!  Passing props for a project this large would have driven me crazy.  Happy I can add this skill to my newbie developer arsenal.  So, here is my context for managing my books.  I only wanted the user to have the ability to create new books so it's simple, but the context of the comments gets a bit more intricate.

![Managing Book State](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bnv3ut12v2msoadd1xv.png)

The handleAddNewBook function is relatively straightforward.  I use the spread operator on the books array to gain access, and then I insert my new book.  Super simple.  Now...because each user has their own books array created by the backend associations, I also need to update the user state.  This is where my brain started malfunctioning so to speak.  How do I accomplish such a thing?  Those synapses were firing, but they sure weren't connecting until my instructor broke down what I needed to do.  

![Managing User State](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp70qs3et952wt43ziuu.png)

To keep this post from getting too cluttered, the above image only has functions that update the user state for their books and comments.  The user can add a book, add a comment to that book, edit a comment, and delete a comment.  I break each function down to better explain below. 

## Updating Complex State For A Create Action
**handleAddNewUserBook** and **handleAddNewUserComment**
- these functions are similar in that the user is adding new objects to their respective associated books and comments arrays
- open the user object with the spread operator (...user)
- direct your attention to the respective array and update it's value
- everything after the comma is what you will be setting the value of the respective user arrays to 
- **Important:** take note that the entire value must be wrapped in brackets because the key (books) is an array

## Updating Complex State For A Patch Action
**handleEditUserComment**
- **updatedComments** is the array of comments after we have mapped over the comments array to find the comment we would like to update and swapped it for the new comment
- now that we have this new array, we set the user in much the same way as the two functions above
- the difference is that this variable is an array already, so it does not need to be wrapped in brackets

## Updating Complex State For A Delete Action
**handleDeleteUserComment**
- when updating state for a delete action, the filter method is used rather than map and the array that is returned will not include the deleted comment

## Conclusion
As applications grow, state management gets more complex to manage and useContext definitely helps with the separation of concerns.  I hope you utilize both masterfully with the help of this post in the future.  This was also my first time using the Polacode extension for Visual Code Studio.  I think the image clarity is better than the screenshots I usually use.  I'd love to hear your feedback.  Please comment below.  Happy coding!