How can I manage state in a React application using hooks?

How can I manage state in a React application using hooks?

You can use the useState and useReducer hooks for state management in React. useState is great for simple state, while useReducer is better for complex state logic.

Can you give me an example of using useState?

Sure! Here's a simple example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

What about useReducer? When should I use it?

useReducer is useful when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. It's also great for managing state in larger applications.

Can you show me a simple useReducer example?

Absolutely! Here's a basic example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}