SpringValue.map

Proposal

react-spring's desire to completely avoid rendering has been causing tons and tons of problems for me ever since I tried adopting it. The seemingly opaque SpringValue datatype can only be used in very specific places due to the way animated works. I can't do things like change display to none only when a spring value is 0 because my component does not get re-rendered. It's so annoying and restrictive and I have to spend hours with each component figuring out how to coax the behavior I want out of the spring.

Perhaps one way to help with this would be to introduce a map method on SpringValue which would return another SpringValue that depends on the first one, allowing me to insert it into the right slots to get animated to recognize it, but process the values that reach the DOM. This would allow me to do things like hide an element when it is not visible (visibility value is 0).

<Spring to={...}>
	{({value}) =>
		<animated.div style={{display: value.map(v => v === 0 ? 'none' : undefined)}}>...</animated.div>
	}
</Spring>

This will solve some of the issues with the current system without react-spring having to move to another.

Rationale

The perfect solution that I have come up with is a component that re-renders every frame by using window.requestAnimationFrame and detecting when the spring values change. Of course, this is the exact OPPOSITE of what this library is designed to do, but - it solves every single problem I had with spring, and allows me to use the values however I like. I call it the SpringSolidifier because it turns the SpringValues into actual values that can be used. It uses a render prop to return the "solidified" values object. Additionally, it allows me to completely unmount the element when it is fully invisible. This is currently not possible with react-spring to my knowledge. Due to this, I'm no longer reliant on the quirks of animated - springs become usable anywhere in my application, for any purpose, even CSS properties or conditional rendering or what-have-you.

However, since that component is the complete opposite of what this library currently does, I think a map function would fit the project better. It would allow react-spring to keep the updates out of React, but also allow the consumers of the library to control those updates. Right now react-spring only has the former.

The issue names SpringValue and animated but does not identify files, tests, or a specific entry point. Start by locating those APIs and reviewing how dependent values are currently handled; done would require an agreed design and tests covering a mapped value such as converting 0 to a hidden display value.