You can use a ternary inside your useState hook and it will work fine. However, it is better to wrap it inside a function expression in the following manner.

const [number, setNumber] = useState((data) => data === 'end' ? 5 : 0)

The function expression in above code snippet will be evaluated only once while setting the initial state. There is an upside to wrapping your ternary operator inside the function expression.

Suppose that instead of data === 'end' ? 5 : 0 you want to use the results of an expensive computation to set the initial state, in such a case you can wrap it inside a function expression like:

const [number, setNumber] = useState(() => expensiveFunction())

This is better because () => expensiveFunction() will return a function which will only be evaluated once during the initial render. Whereas if you don't wrap the expensiveFunction inside a function expression, it will be evaluated each time your component renders and block the execution of code until expensiveFunction returns a value.

This approach is also known as Lazy initialization.

You can use a ternary inside your useState hook and it will work fine. However, it is better to wrap it inside a function expression in the following manner:

const [number, setNumber] = useState(() => data === 'end' ? 5 : 0)

The function expression in above code snippet will be evaluated only once while setting the initial state. There is an upside to wrapping your ternary operator inside the function expression.

Suppose that instead of data === 'end' ? 5 : 0 you want to use the results of an expensive computation to set the initial state, in such a case you can wrap it inside a function expression like:

const [number, setNumber] = useState(() => expensiveFunction())

This is better because () => expensiveFunction() will return a function which will only be evaluated once during the initial render. Whereas if you don't wrap the expensiveFunction inside a function expression, it will be evaluated each time your component renders and block the execution of code until expensiveFunction returns a value.

This approach is also known as Lazy initialization.

You can use a ternary inside your useState hook and it will work fine. However, it is better to wrap it inside a function expression in the following manner.

const [number, setNumber] = useState((data) => data === 'end' ? 5 : 0)

The function expression in above code snippet will be evaluated only once while setting the initial state. There is an upside to wrapping your ternary operator inside the function expression.

Suppose that instead of data === 'end' ? 5 : 0 you want to use the results of an expensive computation to set the initial state, in such a case you can wrap it inside a function expression like:

const [number, setNumber] = useState(() => expensiveFunction())

This is better because () => expensiveFunction() will return a function which will only be evaluated once during the initial render. Whereas if you don't wrap the expensiveFunction inside a function expression, it will be evaluated each time your component renders and block the execution of code until expensiveFunction returns a value. This approach is also known as Lazy initialization.

const Calculate({data}) => { const [number, setNumber] = data === 'end' ? useState(5) : useState(0);

return (...) }

According to my understanding, this might have thrown an error because React hooks can only be called as top level elements. In simpler words, they cannot be wrapped inside a function and you wrapped a hook call inside a ternary operator.

You can use a ternary inside your useState hook and it will work fine. However, it is better to wrap it inside a function expression in the following manner.

const [number, setNumber] = useState((data) => data === 'end' ? 5 : 0)

The function expression in above code snippet will be evaluated only once while setting the initial state. There is an upside to wrapping your ternary operator inside the function expression.

Suppose that instead of data === 'end' ? 5 : 0 you want to use the results of an expensive computation to set the initial state, in such a case you can wrap it inside a function expression like:

const [number, setNumber] = useState(() => expensiveFunction())

This is better because () => expensiveFunction() will return a function which will only be evaluated once during the initial render. Whereas if you don't wrap the expensiveFunction inside a function expression, it will be evaluated each time your component renders and block the execution of code until expensiveFunction returns a value. 

This approach is also known as Lazy initialization.