treyhuffine

import * as React from 'react';
import useFriendStatus from './useFriendStatus';

interface IUser {
  id: number;
  username: string;
}

const FriendsListItem ({ user }) => {
  // We know this value is a boolean since we defined our hook

treyhuffine

import React, { useState, useEffect } from 'react';

type Hook = (friendID: number) => boolean

interface IStatus {
  id: number;
  isOnline: boolean;
}

const useFriendStatus: Hook = (friendID) => {

treyhuffine

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  // Show a label in DevTools next to this Hook
  // e.g. "FriendStatus: Online"
  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;

treyhuffine

useDebugValue(value)

treyhuffine

function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;

treyhuffine

function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;

treyhuffine

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = React.forwardRef(FancyInput);

treyhuffine

useImperativeHandle(ref, createHandle, [inputs])

treyhuffine

function useRef<T>(initialValue: T): MutableRefObject<T>;
  
interface MutableRefObject<T> {
  current: T;
}

treyhuffine

function TextInputWithFocusButton() {
  // The type of our ref is an input element
  const inputEl = useRef<HTMLInputElement>(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };

  return (
    <>