DEV Community

Refactoring a small Next app to use Hooks

selbekk on March 11, 2019

When the React Core team launched the concept of hooks, I was all on board within a few minutes of reading the docs. Keeping everything as simple f...
Collapse
 
jescalan profile image
Jeff Escalante

Curious about the background image component - is there any reason you didn't use an img element with srcset for this functionality?

Collapse
 
selbekk profile image
selbekk • Edited

Great question!

In this case, there were two reasons. Firstly, I animate the transition from one image to the other. Secondly, I wanted to use the image as a background image (and therefore leverage background-size: cover).

Also, I didn’t think of the srcset prop, to be honest 🙈

Collapse
 
jescalan profile image
Jeff Escalante

Cool thanks for answering so quickly! In case you end up in this situation again and feel like you want to avoid inline styles here, you can use object-fit: cover in css to emulate the same behavior as background-size: cover on a native image element. This is pretty helpful because it lets you get that behavior and also take advantage of the performance benefits of srcset 😀

Collapse
 
warren profile image
Warren Haskins

Great article! That usePageTracking hook is 👌.