React Hooks – انجمن DEV

const [stateVariable,functionToUpdateVariable] = useState(initialValue)

const [isOpen,setIsOpen] = useState(false)

import React, { useState } from 'react';

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};
export default Counter

useEffect(callback, dependencies)
useEffect(()=>{},[dependencies])

import "./App.css";
import React, { useEffect, useState } from "react";

const DataFetch = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an API
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        console.log("Data", data);
      });
  }, []);

  return (
    <div>
      <h1>Name: {data[0]?.name}</h1>
      <h1>Name: {data[1]?.name}</h1>
      <h1>Name: {data[2]?.name}</h1>
    </div>
  );
};

export default DataFetch;

const value = useContext(Context);

import React, { useContext } from "react";

// Create a context
const MyContext = React.createContext();

// Create a component that provides the context value
const Parent = () => {
  const contextValue = "Hello, My Name is Himanshu Baghel";

  return (
    <MyContext.Provider value={contextValue}>
      <Child />
    </MyContext.Provider>
  );
};

// Create a component that consumes the context
const Child = () => {
  // Consume the context using useContext
  const contextValue = useContext(MyContext);

  return <p>{contextValue}</p>;
};

// Render the parent component
const App = () => {
  return <Parent />;
};

export default App;