Ink Hooks and State Management
You are an expert in managing state and side effects in Ink applications using React hooks.
Core Hooks
useState - Local State
import { Box, Text } from 'ink';
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState(0);
return (
<Box>
<Text>Count: {count}</Text>
</Box>
);
};useEffect - Side Effects
import { useEffect, useState } from 'react';
const DataLoader: React.FC<{ fetchData: () => Promise<string[]> }> = ({ fetchData }) => {
const [data, setData] = useState<string[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
fetchData()
.then((result) => {
setData(result);
setLoading(false);
})
.catch((err: Error) => {
setError(err);
setLoading(false);
});
}, [fetchData]);
if (loading) return <Text>Loading...</Text>;
if (error) return <Text color="red">Error: {error.message}</Text>;
return (
<Box flexDirection="column">
{data.map((item, i) => (
<Text key={i}>{item}</Text>
))}
</Box>
);
};useInput - Keyboard Input
import { useInput } from 'ink';
import { useState } from 'react';
const InteractiveMenu: React.FC<{ onExit: () => void }> = ({ onExit }) => {
const [selectedIndex, setSelectedIndex] = useState(0);
const items = ['Option 1', 'Option 2', 'Option 3'];
useInput((input, key) => {
if (key.upArrow) {
setSelectedIndex((prev) => Math.max(0, prev - 1));
}
if (key.downArrow) {
setSelectedIndex((prev) => Math.min(items.length - 1, prev + 1));
}
if (key.return) {
// Handle selection
}
if (input === 'q' || key.escape) {
onExit();
}
});
return (
<Box flexDirection="column">
{items.map((item, i) => (
<Text key={i} color={i === selectedIndex ? 'cyan' : 'white'}>
{i === selectedIndex ? '> ' : ' '}
{item}
</Text>
))}
</Box>
);
};useApp - App Control
import { useApp } from 'ink';
import { useEffect } from 'react';
const AutoExit: React.FC<{ delay: number }> = ({ delay }) => {
const { exit } = useApp();
useEffect(() => {
const timer = setTimeout(() => {
exit();
}, delay);
return () => clearTimeout(timer);
}, [delay, exit]);
return <Text>Exiting in {delay}ms...</Text>;
};useStdout - Terminal Dimensions
import { useStdout } from 'ink';
const ResponsiveComponent: React.FC = () => {
const { stdout } = useStdout();
const width = stdout.columns;
const height = stdout.rows;
return (
<Box>
<Text>
Terminal size: {width}x{height}
</Text>
</Box>
);
};useFocus - Focus Management
import { useFocus, useFocusManager } from 'ink';
const FocusableItem: React.FC<{ label: string }> = ({ label }) => {
const { isFocused } = useFocus();
return (
<Text color={isFocused ? 'cyan' : 'white'}>
{isFocused ? '> ' : ' '}
{label}
</Text>
);
};
const FocusableList: React.FC = () => {
const { enableFocus } = useFocusManager();
useEffect(() => {
enableFocus();
}, [enableFocus]);
return (
<Box flexDirection="column">
<FocusableItem label="First" />
<FocusableItem label="Second" />
<FocusableItem label="Third" />
</Box>
);
};Advanced Patterns
Custom Hooks
// useInterval hook
function useInterval(callback: () => void, delay: number | null) {
const savedCallback = useRef(callback);
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
if (delay === null) return;
const id = setInterval(() => savedCallback.current(), delay);
return () => clearInterval(id);
}, [delay]);
}
// Usage
const Spinner: React.FC = () => {
const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
const [frame, setFrame] = useState(0);
useInterval(() => {
setFrame((prev) => (prev + 1) % frames.length);
}, 80);
return <Text color="cyan">{frames[frame]}</Text>;
};Async State Management
function useAsync<T>(asyncFunction: () => Promise<T>) {
const [state, setState] = useState<{
loading: boolean;
error: Error | null;
data: T | null;
}>({
loading: true,
error: null,
data: null,
});
useEffect(() => {
let mounted = true;
asyncFunction()
.then((data) => {
if (mounted) {
setState({ loading: false, error: null, data });
}
})
.catch((error: Error) => {
if (mounted) {
setState({ loading: false, error, data: null });
}
});
return () => {
mounted = false;
};
}, [asyncFunction]);
return state;
}Promise-based Flow Control
interface PromiseFlowProps {
onComplete: (result: string[]) => void;
onError: (error: Error) => void;
execute: () => Promise<string[]>;
}
const PromiseFlow: React.FC<PromiseFlowProps> = ({ onComplete, onError, execute }) => {
const [phase, setPhase] = useState<'pending' | 'success' | 'error'>('pending');
useEffect(() => {
execute()
.then((result) => {
setPhase('success');
onComplete(result);
})
.catch((err: Error) => {
setPhase('error');
onError(err);
});
}, [execute, onComplete, onError]);
return (
<Box>
{phase === 'pending' && <Text color="yellow">Processing...</Text>}
{phase === 'success' && <Text color="green">Complete!</Text>}
{phase === 'error' && <Text color="red">Failed!</Text>}
</Box>
);
};Best Practices
- Cleanup: Always cleanup in useEffect return functions
- Dependencies: Correctly specify dependency arrays
- Refs: Use useRef for mutable values that don't trigger re-renders
- Callbacks: Use useCallback to memoize event handlers
- Unmount Safety: Check mounted state before setting state in async operations
Common Pitfalls
- Forgetting to cleanup intervals and timeouts
- Missing dependencies in useEffect
- Setting state on unmounted components
- Not handling keyboard input edge cases
- Infinite re-render loops from incorrect dependencies