Today, I will try to rewrite the example with the latest big thing in React world - React Hooks! I'm so excited about this addition since writing functional components are much better solution than the class-based way! With them is much more easier to code, test and maintain and after the hooks introduction - they're on steroids with state management and handling lifecycle events! 🚀
So, lets dive in the revised example with hooks!
1. Lets create a file: Themes.js, containing our themes:
2. Create a file called AppContextProvider.js and write a function that will provide our AppContext Provider:
3. Go back to App.js and update the return statement:
4. So, here is how to change the theme from a child component:
What do you think when comparing the functional approach with hooks to the class-based example in the previous article?
Yeah, it's so simple, clean and... fun! 🥳