In a project, you have a theme toggle button that switches between dark and light modes. Nested deeply within the component hierarchy is a button that needs to know the current theme. How can you efficiently provide the theme information to the button without prop drilling?

  • Pass the theme information as a URL parameter using React Router.
  • Use React's useContext hook to access the theme information from a context provider higher in the component tree.
  • Use a global JavaScript variable to store and access the current theme.
  • Use a third-party state management library like Mobx or Recoil to share the theme information across components.
To efficiently provide the theme information to a deeply nested button without prop drilling, you can use React's useContext hook. This hook allows you to access the theme information from a context provider higher in the component tree without passing it down as props. Using third-party libraries or URL parameters is not the most straightforward and efficient approach, and using a global JavaScript variable can lead to issues with component re-renders and isn't recommended.
Add your answer
Loading...

Leave a comment

Your email address will not be published. Required fields are marked *