Frontend Mentor | Rest Countries API with theme switcher, React.js coding challenge solution

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

Antoine C• 1,180

@mattari97

Posted 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 helpful

Katherine• 100

@rendongzha

Posted 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. 😄

Rest Countries API with theme switcher, React.js

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community