Encapsulating Logic with Custom Hooks

Snippet

Encapsulating Logic with Custom Hooks

Custom hooks allow you to extract component logic into reusable functions, keeping your Next.js components clean and focused on UI.

snippet.js
javascript
import { useState } from 'react';
 
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => setValue(e.target.value);
  return { value, onChange, reset: () => setValue('') };
}
 
// Usage in Next.js component
export default function SignupForm() {
  const nameInput = useInput('');
  return <input type="text" {...nameInput} />;
}

nextjs

Breakdown

function useInput(initialValue) {

Declares a custom hook that manages string input state.

{...nameInput}

Uses the spread operator to pass 'value' and 'onChange' props to the input element.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Encapsulating Logic with Custom Hooks

Related