Rest Countries || React

Community feedback

• 

  Cătălina Hasnaș•300

  @Catalina-Hasnas

  Posted over 1 year ago

  Hello! Nice project :). Clean React components and readable folder structure. I liked that you take the information about preffered theme from the local storage and avoid any flickers. Not a lot to critique, I do have a few suggestions, though:

  • Remove const regions from the component, because it doesn’t need to be re-created every time the component re-renders, like so:

  const regions = ["Africa", "America", "Asia", "Europe", "Oceania"];
  function Filter({ filter, setFilter }) { … regions.map()
  

  If you use it in multiple components, you can export it.

  • You do not need to pass “darkMode” as a prop from App. Look into using a Theme Provider to wrap around the App. You can read about it here. It is the old react documentation, but I find the example in the new documentation to be over-complicated for this purpose. Also, it is mentioned as a use case for theming in the new documentation Theming: If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.

  • A small suggestion: You can add all your color variables at the root level as well and then use a selector such as a class name or an attribute to change them accordingly. You added them in the style attribute in a javascripty way, but you could technically only add an attribute such as: "data-theme = "dark" to the body and let CSS handle the rest :). This article has a good example of this.

  11

  Marked as helpful