Explain how to create a simple React Hooks example program.

A React Hooks example program is a small React application that demonstrates how to use one or more built-in Hooks—such as useState or useEffect—inside a functional component to manage state and side effects without writing any class components.

1. Setup Your React App

   • Use Create React App for zero-config scaffolding:

     BASH

   • This gives you a working React project with ES6, JSX, and live reloading.

2. Import the Hooks You Need

   • At the top of your component file, import Hooks from React:

     JS

3. Define a Functional Component

   • Inside that function, call Hooks unconditionally at the top level so React can track their order across renders.

4. Use useState to Hold Local State

   • Declare a state variable and its setter:

     JS

   • This lets you read count in your JSX and update it with setCount(...), causing a re-render.

5. Use useEffect for Side Effects

   • To run code after render—such as logging or fetching data—use:

     JS

   • The dependency array [count] ensures the effect runs only when count changes.

6. Return JSX That Reflects State

   • Your component’s return should use the state and provide UI controls (buttons, inputs) that call the setter functions.

Code Example: Counter with Logging

1. useState(0) creates a count variable starting at 0.
2. setCount lets you update it—here via the Increment and Reset buttons.
3. useEffect watches [count] and logs each change to the console.