useref

1/*
2	A common use case is to access a child imperatively: 
3*/
4
5function TextInputWithFocusButton() {
6  const inputEl = useRef(null);
7  const onButtonClick = () => {
8    // `current` points to the mounted text input element
9    inputEl.current.focus();
10  };
11  return (
12    <>
13      <input ref={inputEl} type="text" />
14      <button onClick={onButtonClick}>Focus the input</button>
15    </>
16  );
17}

1import React, { useState, useEffect, useRef } from "react";
2import ReactDOM from "react-dom";
3
4import "./styles.css";
5
6function CountMyRenders() {
7  const countRenderRef = useRef(1);
8
9  useEffect(function afterRender() {
10    countRenderRef.current++;
11  });
12
13  return <div>I've rendered {countRenderRef.current} times</div>;
14}
15
16function App() {
17  const [count, setCount] = useState(0);
18  return (
19    <div className="App">
20      <CountMyRenders />
21      <button onClick={() => setCount(count => count + 1)}>
22        Click to re-render
23      </button>
24    </div>
25  );
26}
27
28const rootElement = document.getElementById("root");
29ReactDOM.render(<App />, rootElement);

1function TextInputWithFocusButton() {
2  const inputEl = useRef(null);
3  const onButtonClick = () => {
4    // `current` points to the mounted text input element
5    inputEl.current.focus();
6  };
7  return (
8    <>
9      <input ref={inputEl} type="text" />
10      <button onClick={onButtonClick}>Focus the input</button>
11    </>
12  );
13}

1  const inputEl = useRef(null);

1import React, { useState, useEffect, useRef } from 'react'
2import isDeepEqual from 'fast-deep-equal/react'import { getPlayers } from '../api'
3import Players from '../components/Players'
4
5const Team = ({ team }) => {
6  const [players, setPlayers] = useState([])
7  const teamRef = useRef(team)
8  if (!isDeepEqual(teamRef.current, team)) {    teamRef.current = team  }
9  useEffect(() => {
10    if (team.active) {
11      getPlayers(team).then(setPlayers)
12    }
13  }, [teamRef.current])
14  return <Players team={team} players={players} />
15}

1const refContainer = useRef(initialValue);
2//useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). 
3//The returned object will persist for the full lifetime of the component.