SamwithCode

Complete Axios in React JS 2025

useEffect Hook Challenge

useEffect(() => {
  // logic
}, [dependency]);

Forward Ref & No More Forward Ref in React JS 2025

const Input = React.forwardRef((props, ref) => {
  return ;
});

useId Hook in React JS 2025

const id = useId();

Props Drilling in React JS 2025

// Passing props through multiple components
const App = () => ;

Context API & useContext Hook in React JS 2025

const ThemeContext = React.createContext();
const App = () => (
  
    
  
);

Create Custom Hook in React

function useCounter() {
  const [count, setCount] = useState(0);
  return { count, increment: () => setCount(count + 1) };
}

New 'use' Hook in React JS 2025

const data = use(fetchData());

useReducer Hook & Best Practices 2025

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

React.memo vs useMemo

React.memo(Component)
useMemo(() => compute(), [deps])

useCallback Hook in React JS 2025

const memoizedFn = useCallback(() => doSomething(), [deps]);

React Router v6.4 Introduction

npm install react-router-dom
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

Helper Functions & AppLayout in React Router 2025

const AppLayout = () => (
  

    
    
  

);

Dynamic Navigation Bar

Home

Active Links with React Navigation

 isActive ? 'text-blue-500' : ''}>Profile

Error Page Handling

errorElement:

useNavigate Hook

const navigate = useNavigate();
navigate("/dashboard");

Loader for Fetch API

loader: async () => fetch('https://api.com/data')

Global Loading State

const [loading, setLoading] = useState(false);

Secure with .env File

REACT_APP_API_KEY=yourapikey

Dynamic Route Fetching

path: "/product/:id",
loader: ({ params }) => fetch(`/api/product/${params.id}`)

Form Action in React Router

action: async ({ request }) => {
  const formData = await request.formData();
  // handle submission
}

Axios in React JS 2025

axios.get('/api/data')
axios.post('/api', { name: "John" })