React by Patrik

React Hooks

React hooks are functions that let you use state and other React features in functional components. They provide an easier way to manage component state, handle side effects, and access lifecycle methods. Hooks like useState and useEffect help you write cleaner and more reusable code, making React development easier and more intuitive.

useContext Hook in React

useContext is a React Hook that lets you read and subscribe to context from your component. React Context is a way to manage state globally.

Open

Add to Set

Comment

useNavigate Hook in React

The useNavigate hook from React Router returns a function that lets you navigate programmatically, for example in an effect:

import { useNavigate } from "react-router-dom";

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

Button click

import { useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
...
<Button onClick={() => navigate('../user', { replace: true })}>Register</Button>

Reference

Open

Add to Set

Comment