React Facts 1 • Astro Theme OpenBlog

onClick

The onClick event is used to handle the click event on an element.
It is a synthetic event that is fired when a user clicks on an element.
It is used to trigger a function when a user clicks on an element.
The onClick event can be used with any HTML element, such as a button, div, span, etc.
The onClick event can be used with a function that is defined in the component.
The onClick event can be used with an arrow function to handle the click event inline.
The onClick event can be used with an event parameter to access the event object.
The onClick event can be used to trigger an action, update the state, or perform any other operation when a user clicks on an element.
preventDefault() can be used to prevent the default behavior of an element when the onClick event is triggered.

// The below code will handle the click event on a button element.
<button onClick={handleClick}>Click Me</button>

// The below code will log "Button Clicked" when the button is clicked.
handleClick = () => {
    console.log("Button Clicked");
}

// The below code will handle the click event on a button element with an event parameter.
handleClick = (event) => {
    console.log("Button Clicked", event);
}

// example of using onClick with an arrow function
<button onClick={() => console.log("Button Clicked")}>Click Me</button>

// example of using onClick with preventDefault
handleClick = (event) => {
    event.preventDefault();
    console.log("Button Clicked");
}

useState

The useState hook is used to add state to a functional component.
It returns an array with two elements: the current state value and a function that lets you update it.
The initial state is passed as an argument to the useState hook.

// The below code will add a state variable count to the component.
const [count, setCount] = useState(0);

// The below code will update the count state variable.
setCount(count + 1);

// The below code will display the count state variable.
<p>{count}</p>

// The below code will update the count state variable using a function.
setCount((prevCount) => prevCount + 1);

useEffect

The useEffect hook is used to perform side effects in a functional component.
It is similar to componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
The useEffect hook takes two arguments: a function that contains the side effect and an optional array of dependencies.
The function passed to useEffect is called after the component is rendered.
The function passed to useEffect can return a cleanup function that will be called before the component is unmounted.
The array of dependencies is used to specify when the effect should run.
If the array of dependencies is empty, the effect will only run once after the component is mounted.
If the array of dependencies contains variables, the effect will run whenever one of the variables changes.
The cleanup function is used to clean up any resources used by the effect, such as event listeners or timers.
The cleanup function is called before the component is unmounted and before the effect runs again.
The cleanup function can be used to cancel any asynchronous operations or clean up any subscriptions.
The useEffect hook can be used to fetch data from an API, update the document title, set up event listeners, and more.
The useEffect hook can be used to perform side effects in a functional component.
async functions can’t be used directly in the useEffect hook. You can create a separate function and call it inside the useEffect hook.

// The below code will log "Component Mounted" when the component is mounted.
useEffect(() => {
    console.log("Component Mounted");
}, []);

// The below code will log "Count Updated" when the count state is updated.
useEffect(() => {
    console.log("Count Updated");
}, [count]);

// cleanup function
useEffect(() => {
    console.log("Component Mounted");
    return () => {
        console.log("Component Unmounted");
    };
}, []);

// cleanup function example with setTimeout
useEffect(() => {
    const timer = setTimeout(() => {
        console.log("Timer Expired");
    }, 1000);
    return () => {
        clearTimeout(timer);
    };
}, []);

// example of wrong async function usage
useEffect(async () => {
    const data = await fetchData();
    console.log(data);
}, []);

// correct way to use async function
useEffect(() => {
    const fetchData = async () => {
        const data = await fetch('https://api.example.com/data');
        const json = await data.json();
        console.log(json);
    };
    fetchData();
}, []);

// Example with useState and useEffect
import React, { useEffect, useState } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(err => console.error(err));
  }, []); // The empty array means this effect runs once on mount and not on updates.

  if (!data) return 'Loading...';

  // Rendering the data after it's fetched.
  return (
    <div>
      <h2>Data:</h2>
      {data.map(item =>
        <div key={item.id}>
          {item.value}
        </div>
      )}
    </div>
  );
}

Props

Props are used to pass data from a parent component to a child component.
Props are read-only and cannot be modified by the child component.
Props are passed as attributes to the child component.
Props can be of any type, including strings, numbers, functions, objects, arrays, and booleans.
Props can also be children, which are the elements between the opening and closing tags of the component.
Props can be accessed in the child component using the props object.
Props can be destructured in the child component to access them directly.
Props can be used to pass event handlers, state, and other data to child components.
Props can be used to pass data between components in a React application.

// The below code will pass the name prop to the child component.
<ChildComponent name="John" />

// The below code will display the name prop in the child component.
<p>{props.name}</p>

// The below code will pass multiple props to the child component.
<ChildComponent name="John" age={25} />

// The below code will display multiple props in the child component.
<p>{props.name} - {props.age}</p>

// The below code will pass a function as a prop to the child component.
<ChildComponent handleClick={handleClick} />

// The below code will call the handleClick function in the child component.
<button onClick={props.handleClick}>Click Me</button>

// The below code will pass an object as a prop to the child component.
<ChildComponent person={{ name: "John", age: 25 }} />

// The below code will access the object prop in the child component.
<p>{props.person.name} - {props.person.age}</p>

// The below code will pass children as a prop to the child component.
<ChildComponent>
    <p>Child Component</p>
</ChildComponent>

// The below code will display the children prop in the child component.
{props.children}

// The below code will pass an array as a prop to the child component.
<ChildComponent items={['item1', 'item2', 'item3']} />

// The below code will access the array prop in the child component.
{props.items.map(item => <p key={item}>{item}</p>)}

// The below code will pass a boolean prop to the child component.
<ChildComponent isActive={true} />

// The below code will display the boolean prop in the child component.
<p>{props.isActive ? 'Active' : 'Inactive'}</p>

Fragment

Fragments are used to group multiple elements in React without adding extra nodes to the DOM.
Fragments allow you to return multiple elements from a component without wrapping them in a parent element.
Fragments can be used with the <></> syntax or <React.Fragment></React.Fragment> syntax.
key attribute can be used with fragments to avoid the warning when returning multiple elements.
state and lifecycle methods can’t be used in fragments. For example, you can’t use useState or useEffect in fragments.

// The below code will return multiple elements using a fragment.
return (
    <>
        <p>Element 1</p>
        <p>Element 2</p>
    </>
);

// The below code will return multiple elements using a fragment with a key.
return (
    <React.Fragment key={1}>
        <p>Element 1</p>
        <p>Element 2</p>
    </React.Fragment>
);


// Here's an example usage of fragments in a component:
function ExampleComponent() {
  return (
    <>
      <h1>Hello, world!</h1>
      <p>Welcome to our website.</p>
    </>
  );
}