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.
Loading...
Related Quiz
- How do you pass arguments to an event handler?
- In class components, the method used to fetch new props and state and decide whether a re-render should occur is ________.
- Data sent between the main thread and a Web Worker is done through a process called ________.
- How to do logging in React Native?
- In the context of React, what are "Navigation guards"?