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 →

Encapsulating Logic with Custom Hooks

Related