James Ravenscroft jrwebdev

jrwebdev / useDebugValue.ts

Created February 13, 2019 06:15

	const date = new Date();
	useDebugValue(date, date => date.toISOString());

jrwebdev / useRef-mutable.tsx

Created February 13, 2019 06:02

	const myNumberRef = useRef(0);
	myNumberRef.current += 1;

jrwebdev / useRef.tsx

Last active February 13, 2019 06:45

	const MyInput = () => {
	const inputRef = useRef<HTMLInputElement>(null);
	return <input ref={inputRef} />
	}

jrwebdev / useImperativeHandle-usage.tsx

Created February 13, 2019 05:48

	import MyInput, { MyInputHandles } from './MyInput';

	const Autofocus = () => {
	const myInputRef = useRef<MyInputHandles>(null);

	useEffect(() => {
	if (myInputRef.current) {
	myInputRef.current.focus();
	}
	});

jrwebdev / useImperativeHandle.tsx

Last active February 15, 2020 15:56

	export interface MyInputHandles {
	focus(): void;
	}

	const MyInput: RefForwardingComponent<MyInputHandles, MyInputProps> = (
	props,
	ref
	) => {
	const inputRef = useRef<HTMLInputElement>(null);

jrwebdev / useMemo-useCallback.ts

Last active February 13, 2019 06:12

	const value = 10;
	// inferred as number
	const result = useMemo(() => value * 2, [value]);

	const multiplier = 2;
	// inferred as (value: number) => number
	const multiply = useCallback((value: number) => value * multiplier, [multiplier]);

jrwebdev / useEffect.ts

Created February 13, 2019 04:54

	useEffect(() => {
	const subscriber = subscribe(options);
	return () => {
	unsubscribe(subscriber)
	};
	}, [options]);

jrwebdev / useContext.ts

Last active July 23, 2019 20:07

	type Theme = 'light' \| 'dark';
	const ThemeContext = createContext<Theme>('dark');

	const App = () => (
	<ThemeContext.Provider value="dark">
	<MyComponent />
	</ThemeContext.Provider>
	)

	const MyComponent = () => {

jrwebdev / useReducer.ts

Last active July 23, 2019 20:07

	interface State {
	value: number;
	}

	type Action =
	\| { type: 'increment' }
	\| { type: 'decrement' }
	\| { type: 'incrementAmount'; amount: number };

	const counterReducer = (state: State, action: Action) => {

jrwebdev / useState.ts

Created February 13, 2019 03:47

	// inferred as number
	const [value, setValue] = useState(0);

	// explicitly setting the types
	const [value, setValue] = useState<number \| undefined>(undefined);
	const [value, setValue] = useState<Array<number>>([]);

	interface MyObject {
	foo: string;
	bar?: number;