7^th Practical Class:
More Hooks, forwardRef, memo

Some More Hooks

useMemo, useCallback
Custom Hooks
useRef (focus)

`useMemo`, `useCallback`

Whithout Memoization:

function SomeComponent({ a, b, onSubmit }) {
  const sum = a + b;
  const submitCallback = () => onSubmit(a, b);

  return (
    <button type="button" onClick={submitCallback}>
      {sum}
    </button>
  );
}

With Memoization:

function SomeComponent({ a, b, onSubmit }) {
  const sum = useMemo(() => {
    return a + b;
  }, [a, b]);

  const memoizeMe = () => onSubmit(a, b);

  const submitCallback = useCallback(memoizeMe, [a, b]);

  return (
    <button type="button" onClick={submitCallback}>
      {sum}
    </button>
  );
}

`React.memo`

Use React.memo() wisely
- 🚧❗ use React.memo only when something becomes slow
- 🚧❗ overuse of React.memo will make your app much slower!
- remember: Premature optimization is the root of all evil
  - same is for useMemo and useCallback - use it only when needed

function App() {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <button onClick={() => setCounter(counter - 1)}>
        -
      </button>
      {counter}
      <button onClick={() => setCounter(counter + 1)}>
        +
      </button>

      <Rerender active={counter >= 5} />
      <NoRerender active={counter >= 5} />
    </>
  );
}

function Status({ title, active }) {
  return (
    <div>
      {title} {active ? '🏃‍♀️' : '🛑'}
    </div>
  );
}

function Rerender({ active }) {
  console.log('Rerender');

  return (
    <div style={{ padding: 10 }}>
      <Status title="Rerender" active={active} />
    </div>
  );
}

const NoRerender = React.memo(function NoRerender({
  active,
}) {
  console.log('NoRerender');

  return (
    <div style={{ padding: 10 }}>
      <Status title="NoRerender" active={active} />
    </div>
  );
});

ReactDOM.render(<App />);

function App() {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <button onClick={() => setCounter(counter - 1)}>
        -
      </button>
      {counter}
      <button onClick={() => setCounter(counter + 1)}>
        +
      </button>

      <Rerender active={counter >= 5} />
      <NoRerender active={counter >= 5} />
    </>
  );
}

function Status({ title, active }) {
  return (
    <div>
      {title} {active ? '🏃‍♀️' : '🛑'}
    </div>
  );
}

function Rerender({ active }) {
  console.log('Rerender');

  return (
    <div style={{ padding: 10 }}>
      <Status title="Rerender" active={active} />
    </div>
  );
}

const NoRerender = React.memo(function NoRerender({
  active,
}) {
  console.log('NoRerender');

  return (
    <div style={{ padding: 10 }}>
      <Status title="NoRerender" active={active} />
    </div>
  );
});

ReactDOM.render(<App />);

Rerender 🛑

NoRerender 🛑

Rerender

NoRerender

Custom Hooks

see Building Your Own Hooks
use use* prefix!

function useCounter(initialValue = 0) {
  const [counter, setCounter] = useState(initialValue);

  const increment = useCallback(
    () => setCounter((value) => value + 1),
    [],
  );

  return [counter, increment];
}

function SomeComponent() {
  const [counter, increment] = useCounter();

  return (
    <>
      <button type="button" onClick={() => increment()}>
        {counter}
      </button>
    </>
  );
}

ReactDOM.render(<SomeComponent />);

function useCounter(initialValue = 0) {
  const [counter, setCounter] = useState(initialValue);

  const increment = useCallback(
    () => setCounter((value) => value + 1),
    [],
  );

  return [counter, increment];
}

function SomeComponent() {
  const [counter, increment] = useCounter();

  return (
    <>
      <button type="button" onClick={() => increment()}>
        {counter}
      </button>
    </>
  );
}

ReactDOM.render(<SomeComponent />);

`useRef`

useRef documentation

function SomeComponent() {
  const inputRef = useRef();

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button
        type="button"
        onClick={() => {
          inputRef.current && inputRef.current.focus();
        }}
      >
        Focus on input
      </button>
    </div>
  );
}

ReactDOM.render(<SomeComponent />);

function SomeComponent() {
  const inputRef = useRef();

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button
        type="button"
        onClick={() => {
          inputRef.current && inputRef.current.focus();
        }}
      >
        Focus on input
      </button>
    </div>
  );
}

ReactDOM.render(<SomeComponent />);

`React.forwardRef`

React.forwardRef documentation
allows you to use ref in custom components

// `ref` is not working out of the box on custom components:
function Input({ ref, ...props }) {
  return (
    <label>
      Input:
      <input type="text" ref={ref} {...props} />
    </label>
  );
}

function SomeComponent() {
  const inputRef = useRef();

  return (
    <div>
      <Input ref={inputRef} />
      <button
        type="button"
        onClick={() => {
          inputRef.current && inputRef.current.focus();
        }}
      >
        Focus on input
      </button>
      <div>
        Focus does not work in this example. For fix see
        example below.
      </div>
    </div>
  );
}

ReactDOM.render(<SomeComponent />);

// `ref` is not working out of the box on custom components:
function Input({ ref, ...props }) {
  return (
    <label>
      Input:
      <input type="text" ref={ref} {...props} />
    </label>
  );
}

function SomeComponent() {
  const inputRef = useRef();

  return (
    <div>
      <Input ref={inputRef} />
      <button
        type="button"
        onClick={() => {
          inputRef.current && inputRef.current.focus();
        }}
      >
        Focus on input
      </button>
      <div>
        Focus does not work in this example. For fix see
        example below.
      </div>
    </div>
  );
}

ReactDOM.render(<SomeComponent />);

Input:

Focus does not work in this example. For fix see example below.

Enable ref for custom component:

const Input = React.forwardRef(function Input(
  props,
  ref,
) {
  return (
    <label>
      Input:
      <input type="text" ref={ref} {...props} />
    </label>
  );
});

function SomeComponent() {
  const inputRef = useRef();

  return (
    <div>
      <Input ref={inputRef} />
      <button
        type="button"
        onClick={() => {
          inputRef.current && inputRef.current.focus();
        }}
      >
        Focus on input
      </button>
    </div>
  );
}

ReactDOM.render(<SomeComponent />);

const Input = React.forwardRef(function Input(
  props,
  ref,
) {
  return (
    <label>
      Input:
      <input type="text" ref={ref} {...props} />
    </label>
  );
});

function SomeComponent() {
  const inputRef = useRef();

  return (
    <div>
      <Input ref={inputRef} />
      <button
        type="button"
        onClick={() => {
          inputRef.current && inputRef.current.focus();
        }}
      >
        Focus on input
      </button>
    </div>
  );
}

ReactDOM.render(<SomeComponent />);

Input:

7th Practical Class: More Hooks, forwardRef, memo

Some More Hooks

useMemo, useCallback

React.memo

Custom Hooks

useRef

React.forwardRef

7^th Practical Class:
More Hooks, forwardRef, memo

`useMemo`, `useCallback`

`React.memo`

`useRef`

`React.forwardRef`