So what is actually going on here?

react-sentinel works by taking a function, the observe prop, and calling it repeatedly in a performant requestAnimationFrame or requestIdleCallback loop.

requestAnimationFrame loops at a speed that is determined by the browser. If someone is browsing on an older phone, the loop will happen less often. This gives the browser finer control and leads to a smoother experience!

If you want to learn more about requestAnimationFrame , I suggest reading Gain Motion Superpowers with requestAnimationFrame by Benjamin De Cock! 🙌

Sentinel takes the return value from those functions, and if it’s different from the previous return value, sets it as the Sentinel component’s local state. If it’s not different, then we stop right there and don’t update so we aren’t constantly re-rerendering! 😅

Using Render Props

Now at this point you may be asking what good is setting Sentinel ’s local state? How are we going to get that? 🤔

My preferred way to do this is using Render Props.

Most know that you can pass in children to a component, and access them using this.props.children , but you could also pass in a function!

<MightHaveSecrets>

{() => <WantsSecrets />}

</MightHaveSecrets>

Alright, that’s a thing. Why would anyone want to do that? 😥

Because now, has secrets can pass it’s internal secrets as an argument to that function! It has no idea how you are actually going to use those secrets, which makes it super encapsulated.

<MightHaveSecrets>

{secret => <WantsSecrets emoji={ secret ? 😆 : 😢 } />}

</MightHaveSecrets>

All the <Sentinel /> component cares about is polling infinitely looking to update itself. Render Props allow any chunk of UI to interpret those updates as they see fit. Also it’s a lot more obvious where those values are coming from. 👊

If you want to learn more about Render Props, I suggest taking a look at the React Documentation or reading this article by the person who first turned me onto them!

Now we have a smart component that translates the size of the element into simple props that <DumbCard /> can digest. It’s super easy to refactor and swap values, and you don’t have to worry about what layout it lives in, or what’s going on outside of its scope.

Wrapping up

Imagine how difficult it would have been to write CSS for a card the user could resize. Now, we react to anything that changes the elements size.

The cool thing about react-sentinel is that it doesn’t just solve the element queries problem. I’ve also used it to create a Smart Animation component, since it uses requestAnimationframe under the hood 👏

Here is where you can check out the code for react-sentinel , as well as some alternative solutions!

If you have any questions, or any topics that you’d like to see covered more in-depth feel free to hit me up! Thanks for reading and happy coding! 😙