Comments (3)
We should gradually convert all of these to functional components anyway (which uses "useRef" instead of "createRef"). Here are my personal notes on how to use REFS with functional components:
Refs
Why use Refs?
By using a ref, you ensure that:
- You can store information between re-renders (unlike regular variables, which reset on every render).
- Changing it does not trigger a re-render (unlike state variables, which trigger a re-render).
- The information is local to each instance of your component (unlike global variables, which are shared).
Changing a ref does not trigger a re-render, so refs are not appropriate for storing information you want to display on the screen. Use state for that instead.
How to use
Call useRef
at the top level of your component to declare one or more refs.
import { useRef } from 'react';
function Stopwatch() {
const intervalRef = useRef(0);
// ...
useRef
returns a ref object with a single current
property initially set to the initial value you provided.
On the next renders, useRef
will return the same object. You can change its current
property to store information and read it later. This might remind you of state, but there is an important difference.
Changing a ref does not trigger a re-render. This means refs are perfect for storing information that doesn’t affect the visual output of your component. For example, if you need to store an interval ID and retrieve it later, you can put it in a ref. To update the value inside the ref, you need to manually change its current
property:
function handleStartClick() {
const intervalId = setInterval(() => {
// ...
}, 1000);
intervalRef.current = intervalId;
}
Later, you can read that interval ID from the ref so that you can call clear that interval:
function handleStopClick() {
const intervalId = intervalRef.current;
clearInterval(intervalId);
}
from homebrewery.
Do you want to combine this ref work with functional component work? If so, this issue could be renamed to indicate the much larger task of doing that (and refs would be one small part). Perhaps as a Project, and separate out each component as a separate Issue?
from homebrewery.
However you want is fine with me.
from homebrewery.
Related Issues (20)
- Block cloning HOT 5
- Issue while autosaviong the document HOT 1
- Not saving HOT 2
- Saving Error HOT 2
- Selector suggestion in Style editor tab HOT 2
- Enable `sign` and `abs` math functions HOT 3
- Add pageflip effect to share page /new share page HOT 1
- Links in ToC broken with 3.13.0 release HOT 5
- DOMpurify breaks custom html elements HOT 4
- Links to Imgur and Deviant images don't | 3.13.0 HOT 3
- fancy drop cap is ugly if bold HOT 6
- All 3.13.0 issues
- New Table of Contents page numbers are off by one HOT 1
- IDs and Styles leak from internal elements when Mustache Style Injectors are used
- Ink Friendly snippet causes PDF text to be unselectable
- BrewItem links are underlined
- Table of contents UPPERCASE titles un-uppercaseable! HOT 10
- Limit specific system formatting options to selected system HOT 3
- Can't Save HOT 2
- [FF issue]Extra white space when trying to print after part covers HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from homebrewery.