React Native Hooks Not Updating Component when State Changes
React Hooks are awesome once you understand how they work, and more importantly, why they work. They are the new hotness replacing the old approach to managing state and replacing the need for state machines like Redux. Aside from the frequent quirk you may run into, it’s an outstanding pattern and I recommend you read up on them. Full disclosure, my project was a React Native app.
The biggest hair pulling issue I ran into was when I was trying to populate a child component with the content of a form. Yeah, every tutorial out there takes this approach, but what set this one apart was that I was using a class object within my state versus just a regular string or other simple types as well as having default values within my Preview component. When I listened within the useEffect() for the form change, I could see that my setItem function was getting called, and the state was updating. What was not happening was the child component was never updating with the new values.
This is what my component looked like when I kept running into this issue:
