![// Counter.tsrx — hooks next to output, no rules of hooks
import { useState, useEffect } from 'octane';
export function Counter(props) @{
const [count, setCount] = useState(0);
// A hook behind a condition is fine — slots are
// assigned by call site, not call order.
if (!props.paused) {
useEffect(() => {
console.log('count is now', count);
}); // the compiler infers [count]
}
<button onClick={() => setCount(count + 1)}>{'Count: ' + count}</button>
}](https://pbs.twimg.com/media/HOPoguXXAAAEnKq.jpg?name=small&format=webp)
ALT // Counter.tsrx — hooks next to output, no rules of hooks import { useState, useEffect } from 'octane'; export function Counter(props) @{ const [count, setCount] = useState(0); // A hook behind a condition is fine — slots are // assigned by call site, not call order. if (!props.paused) { useEffect(() => { console.log('count is now', count); }); // the compiler infers [count] } <button onClick={() => setCount(count + 1)}>{'Count: ' + count}</button> }

🇬🇧
![// Counter.tsrx — hooks next to output, no rules of hooks
import { useState, useEffect } from 'octane';
export function Counter(props) @{
const [count, setCount] = useState(0);
// A hook behind a condition is fine — slots are
// assigned by call site, not call order.
if (!props.paused) {
useEffect(() => {
console.log('count is now', count);
}); // the compiler infers [count]
}
<button onClick={() => setCount(count + 1)}>{'Count: ' + count}</button>
}](https://pbs.twimg.com/media/HOPoguXXAAAEnKq.jpg?name=small&format=webp)
ALT // Counter.tsrx — hooks next to output, no rules of hooks import { useState, useEffect } from 'octane'; export function Counter(props) @{ const [count, setCount] = useState(0); // A hook behind a condition is fine — slots are // assigned by call site, not call order. if (!props.paused) { useEffect(() => { console.log('count is now', count); }); // the compiler infers [count] } <button onClick={() => setCount(count + 1)}>{'Count: ' + count}</button> }

























