UseRef, CreateRef, ForwardRef? What’s up with refs in React?
In September of this year, we launched a 5 week epic quest to build a web video call experience using the Zoom Video SDK. It was part of our effort to move our call infrastructure to Zoom and improve A/V quality for Remotion. In the process, we had to seriously level-up our React-fu and make some big brain moves. We’ve got a whole series on useful tricks coming your way soon, but for now, here’s one of the most useful tricks we picked up along the way.
💡 What’s the React equivalent to document.getElementById('banana')?
Answer: Refs! Why would we need this? This is useful in a multitude of cases, but we needed to use React refs to pass DOM elements to an external API. Fear not, it’s much easier than it sounds—let’s get familiar with the Ref concept.
What is a ref?
A ref is just a reference to a value, for when you want to store some information in a component, but you don’t want the component to re-render when that value changes. Here are some common use cases for refs:
- Storing timeout IDs returned by setInterval and setTimeout, since they are normally needed for cleanup, but not for rendering UI.
- Storing and manipulating DOM elements (ex. <inputs>, <buttons>)
- Storing other objects that aren’t necessary to calculate the JSX.
You can store anything inside a ref. When you call useRef, React will create an object with a .current property, and point to the value inside .current.
If you list ref.current as a dependency in a useEffect or useMemo, it won’t ever cause the useEffect or useMemo to re-run. If you have the react-hooks/exhaustive-deps eslint plugin, it will even tell you:
Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component.
Creating and forwarding refs
The typical pattern for modern React apps is to use only functional components (no class components). Since createRef is meant to be used with class components, stick to useRef and forwardRef for functional components.
Here’s how to create and use a ref in Typescript:
Initially, localVideoRef.current will be null. When React creates a DOM node for the <video> element, React will put a reference to this node into localVideoRef.current.
Child component refs
But what if you want to make the video element a child component? The code below will not work because ZoomLocalVideo is a React component and by default React does not let a component access the DOM nodes of other components.
You’ll get the error: "Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"
So let’s useforwardRef! If you wrap forwardRef around the component that you want to reference, you can pass in a ref as an argument in addition to the standard props argument, and the above code will work.
Tada! It works now!
Best practices for refs
Treat refs as an escape hatch: But, if you’re not planning to interface with an external system or API, consider using useState instead. Refs are explicitly meant to update outside of the React render cycle, and if a bulk of application logic relies on refs, it's easy to get into inconsistent states.
Don’t read or write ref.current during rendering: React won’t know when ref.current changes, thus making your component’s output unpredictable. Use useState instead if the information is needed for rendering.
Read more at the official React docs:
This is part of an ongoing React series at Remotion. If you're interested in learning more about React, subscribe to our newsletter, or email angela at remotion dot com
The case for virtual coworking: build a connected remote culture.
Regularly coworking with your hybrid or remote team can help you build the social cohesion that makes work feel less like work.
Here are the biggest reasons we think virtual coworking is an effective way to create a close-knit remote culture:
1. It fosters casual conversations.
Building a connected remote culture is all about fostering 1:1 or small group organic conversations. Virtual coworking makes space for those conversations. When you spend time together outside of agenda-driven meetings, spontaneous chats naturally occur, as they would in a traditional office.
2. It's more inclusive than scheduled social events.
It can be draining for introverts to have to participate in scheduled, purely social conversations. Virtual coworking allows the team to spend time together and occasionally chat without having to constantly be "on," making it more inclusive for introverts and extroverts alike.
3. It's easy to say yes to.
Purely social events are important, but if your remote team is busy or on a tight deadline, it's tough to find the time for social chats without it feeling like an obligation. Coworking is much easier to get your distributed team onboard with because it doesn't take time away from getting work done.
4. It improves remote collaboration.
Coworking can lead to unblocking and shorter feedback loops and stronger remote collaboration. Quick questions get answered easily and in the moment, without a having to schedule a meeting or go back-and-forth in messages. Coworking also builds peer accountability.
5. It's scalable.
Coworking works for teams of all sizes and is a great way to scale your remote culture as your team grows. It's helpful to create opportunities for teammates from different functions to get to know one another.
6. It creates shared momentum.
Virtual coworking helps remote workers for the same reason you might get a membership at a traditional coworking space: the feeling of togetherness is motivating!
Get started with virtual coworking: choose the type most aligned with your priorities.
It takes intentionality to make virtual coworking feel natural and energizing enough to stick—it's not as simple as leaving a Zoom call open all day.
Here are a few of the ways we've set coworking up for our team. We recommend choosing one to start with. If it works, make it routine and experiment with other types from there.
Try independent coworking.
Try project-based coworking.
Best practices for virtual coworking.
Keep group sizes small.
Limit your work sessions to 4-6 people to minimize distraction and help make introverted teammates comfortable chatting.
Signal boost coworking.
Set a norm of letting the entire team know when you're hopping into a coworking room or session.
Make it routine.
Once you've figured out what kind of coworking works for your team, make it a regular, opt-in event. Set up a recurring calendar event to do it at the same time each week to maximize the impact.
Set expectations ahead of time.
When you're first introducing coworking to your remote team, share what you're imagining in your calendar invite and at the top of work sessions to get everyone on the same page. For example:
Let's try virtual coworking! We'll work independently on our own projects with our cameras off, but we'll share virtual space and listen to music together — like we might work side-by-side at a physical office.
Listen to music together.
Play music while you work in a virtual room to create a shared environment and add a little bit of personality to your virtual coworking session.
Set up Coworking Rooms in Remotion.
Most of the above is doable with any video chat app or virtual office, but much easier with Remotion—which we designed with a lightweight, smooth coworking experience in mind. Remotion is the perfect virtual coworking platform—easily set up virtual rooms that your teammates can hop into for different styles of coworking.
While Remotion's virtual workspace is free to use with your remote team, if you're curious about joining a virtual coworking community built on our platform—check out Swift Remote Studio for iOS, Mac, and Swift developers.