✳flâneur — a map of the web's best reading

The Power of Keys in Framer Motion

nan.fyi · 1,483 words · saved by 1 readers

Well, they're both written in Framer Motion, but more importantly, they both take advantage of the React key prop. That's right — the same key prop that you use to suppress the React warning when writing loops: You see, the key prop is a lot more powerful than it seems, and in this post, we'll explore exactly what it is and how you can use it to create some pretty cool animations. The purpose of the key prop is to uniquely identify a React component. If React sees that a component's key has changed between renders, it will unmount that component and mount a new one in its place. For the purposes of this post, I'm using the term "React component" to refer to both custom components (like const MyComponent = (props) => { ... }) and JSX tags (like ). The implication of this is we can use keys to explicitly tell React to "re-mount" a component. Consider this little counter component: Here, we render the component with the name "John". Try incrementing the counter a couple of times an

What do these animations have in common? 中 Show Answer Well, they're both written in Framer Motion, but more importantly, they both take advantage of the React key prop . That's right — the same key prop that you use to suppress the React warning when writing loops: [ "a" , "b" , "c" ]. map (( item ) => < div key = {item}>{item}</ div >); You see, the key prop is a lot more powerful than it seems, and in this post, we'll explore exactly what it is and how you can use it to create some pretty cool animations. A Primer on Keys The purpose of the key prop is to uniquely identify a React component

Explore this link on the map →

related reading