symref
Version:
Static code checker for AI code agents (Windsurf, Cline, etc.)
44 lines • 1.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
// 基本的なフック使用
const BasicHooksComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
return _jsx("div", { children: count });
};
// 複数のフック呼び出し
const MultipleHooksComponent = () => {
const [name, setName] = useState('');
const [age, setAge] = useState(0);
useEffect(() => {
console.log(`Name changed: ${name}`);
}, [name]);
useEffect(() => {
console.log(`Age changed: ${age}`);
}, [age]);
return (_jsx("div", { children: _jsxs("p", { children: [name, ", ", age] }) }));
};
// useRefとuseCallbackの使用
const RefAndCallbackComponent = () => {
const inputRef = useRef(null);
const focusInput = useCallback(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return (_jsxs("div", { children: [_jsx("input", { ref: inputRef, type: "text" }), _jsx("button", { onClick: focusInput, children: "Focus Input" })] }));
};
// useMemoの使用
const MemoComponent = () => {
const [items, setItems] = useState([1, 2, 3, 4, 5]);
const [filter, setFilter] = useState(0);
const filteredItems = useMemo(() => {
console.log('Filtering items...');
return items.filter(item => item > filter);
}, [items, filter]);
return (_jsx("div", { children: _jsx("ul", { children: filteredItems.map(item => (_jsx("li", { children: item }, item))) }) }));
};
export { BasicHooksComponent, MultipleHooksComponent, RefAndCallbackComponent, MemoComponent };
//# sourceMappingURL=ReactHooksUsage.test.js.map