How does the react context effect the wrapped element when state is changed?

Question

I have an example with HTML header element wrapped with react context here:code sandbox example. If the h1 is unwrapped with the context then the css transition applies but if it is wrapped with the context the transition does not apply. I'm guessing it has something to do with re-render but am trying to find the reason why it behaves that way. Any help would be appreciated.

Answer 1

That's really strange and I'm not sure of the reason, but one solution is you could do this with pure CSS, here's a solution I forked from your sandbox: solution sandbox

Update:

I figured out the real issue here, you're defining the Context within your component, which is not correct. Moving it outside of the component fixes your problem: non-css solution