Design comparison
Solution retrospective
Hi everyone, I use localStorage to store and get the search and filter conditions so that they are persisted after I click through to the detail page and then come back. Is there a way to persist the input value while using useRef hook? In the SearchFilter component, I was using useRef to refer to the search bar value, but I found it difficult to initialize the reference value, so I changed to useState hook, which works well. Thanks in advance for any suggestions!
Community feedback
- @mattari97Posted about 2 years ago
Hello Katherine. Congratulations on completing this challenge.
Regarding your question about the filters. I think local-storage is a really good solution if you need to keep the values when the user closes/refreshes the browser but if you just need to keep the "state" when your switch between components/pages you might wanna use a state management solution. I have three of them in mind so take a look and see if it fits you requirements:
1- The Context API. It is the built in solution in React but can be a bit hard to setup and quite verbose. However it means no additional dependencies which is always great 😉
2- Jotai Very simple and flexible state management library for React.
3- Zustand. This is my favorite. Really awesome state management library.
Each of these solution allow you to "share" some state between components/pages.
Hope it helps. Happy coding. Peace 😀
Marked as helpful1@rendongzhaPosted about 2 years ago@AntoineC-dev Thank you for the suggestion. It is very helpful and to the point. The issue here is to maintain state across components. After I applied a state management system, it looks much better now. 😄
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord