Advanced React Patterns

Big Head
  • 👀 View the deployed code on Github.
  • Not happy with the solution? 🐞🐛 Suggest a change.
  • Grammar errors? ✏️ Edit this page.

Prop Getters

Summary: Rewrite the useAnimatedCounter from the previous exercise such that you can add additional function aside from the default behavior to the components. Use the prop getter pattern.

Create an animated clap counter that also changes the page theme when reset, and changes the primary color of the page when "clapped", and other interesting things that you want.

My Solution

The technique here is to create a callAll function. callAll takes an arbitrary number of functions as arguments, and returns a function that takes an arbitrary number of arguments, and for each function, calls that function with those arguments. Checkout the example code below.

Here's the useAnimatedCounter using callAll and the prop-getter pattern

Here's an example of how you can use it