Let's practice what you learned in the section. But first, here's everything we've covered on useEffect:
✅ All the lifecycle hooks functionality that you can emulate with useEffect
✅ componentWillMount or componentDidMount can be executed by simply putting a block of code at the top of your functional component since functional components execute from the top down
✅ componentWillReceiveProps, componentShouldUpdate, and componentWillUpdate have been narrowed down into the useEffect dependency array and the React.memo method with the comparison function of old and new props
✅ componentWillUnmount can be handled by returning a clean up function from your useEffect call
It's nice that we can fit all this functionality into one, much simpler function! We get clean code and performance due to the versatility of useEffect. Let's put this all into practice!
Zoo Visitor Name Tag Generator
I want you to build an app consisting of a parent component and a child component. Both of them must be functional components. This app is for kids visiting the zoo to create name tags.
You should have a form where you can type your nickname, age, and favorite animal. When those things update the child component should display those values like it would on the nametag. When you are happy with the name tag, you should be able to click a button that says ‘complete’, which will show a new ui that is a ‘thank you’ screen for creating a nametag.
Functional Requirements:
1️⃣ Must have parent and child functional components
2️⃣ Parent must pass props to child
- Child must update only when the props values are different
3️⃣ You must utilize class-based lifecycle methods but using a functional component.
Something must execute when the component mounts
Something must execute every time something updates
Something must run a clean up function
Access this challenge right here on Stackblitz.