what's the difference between components and custom hooks?

user_39939 0
Viewed 595

here is my code

function Label({title}){
  return <h1>{title}</h1>
}
function  useLabel({title}){
  return <h1> {title}</h1>
}
function Diff(){
  return <div>
    <Label title='this is component'/>
    {useLabel({title:'this is custom hook'})}
    </div>
}

in the code, I have defined the component Label and the custom hook useLabel. they do exactly the same job except that are called using different syntax.

my questions are:

  1. other than calling syntax, what's is the difference between custom hooks and Components?
  2. can I always use custom hooks instead of component?
react-hooks reactjs
2 Answers

custom hook useLabel

You've given it a name that's conventionally for hooks, but I recommend you don't call it a custom hook as that may cause confusion. Custom hook typically refers to a function that calls one or more of the built in hooks provided by react, such as useState, or useEffect. Because it does this, it brings along the requirement that it needs to follow the rules of hooks.

For example, the following is a custom hook that gets and returns the window width:

const useWindowWidth = () => {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => { 
      window.removeEventListener('resize', handleResize);
    }
  }, [])
  return width;
}

What you've written is a helper function, but it doesn't have to follow the rules of hooks, since it never calls hooks. A helper function that returns a react element can occasionally be useful if you have to do the same thing multiple times, but it's basically no different than just writing a longer Diff component. As far as react knows, it's the same as writing the <h1> in the body of Diff.

So your question boils down to: when should i use one component or multiple components.

Sometimes, that decision will be made for performance reasons. If it's all one component, then it all needs to rerender as a group. But if it's split into separate components, then potentially only a subset of them need to rerender.

Other times, the decision is more about how to make the code understandable to us puny humans. Breaking up components at sensible boundaries can let you mentally group related code together, and then ignore it when you don't need to know the details.

user_37948120

Custom hooks are primarily for the abstraction of stateful logic and state manipulation, so that you can write the hook once and use it in multiple places, or without having to worry about implementation details.

While a custom hook can technically return anything, it's pretty strange for it to return a JSX element, because a component could do the same thing less confusingly. One should want to use a custom hook when wanting to return something other than a JSX element while still working within React's framework, for example:

const isOnline = useFriendStatus(props.friend.id);

can I always use custom hooks instead of component?

It'd technically be possible, but it'd be really confusing. Best to always use components when you're returning JSX.

user_95152070
Related