How do Hooks work in programming and in React?

Hello, can someone explain what are hooks in programming, more specifically in React please, what do they do?

8 Replies

13eck•5mo ago

How was it initially explained to you? What didn’t make sense? Have you read the official docs on the topic? If yes, what didn’t make sense?

FakerOP•5mo ago

hmm from what I have understood, it's a way of how our program can call another program or the other way round where our program gets called by another program. But I didn't really understood how can this be done I know hooks are more about states though how we implement them though seems a bit difficult

13eck•5mo ago

So you know what they are, but not how they work? Because that’s not what your title says. A good title with supporting facts makes it easier for others to help. In this case, I don’t use React so I can’t help any further. But hopefully someone who does can read your more specific query and chime in

vince•5mo ago

Hooks are just functions that allow you to 'hook in' to React's lifecycle: https://react.dev/reference/react/hooks Adding onto lifecycle: I'm not a React developer & can't find the page I was reading for interview prep a few months ago but you can take a look at this to better understand the React lifecycle:

Every React component goes through the same lifecycle: A component mounts when it’s added to the screen. A component updates when it receives new props or state, usually in response to an interaction. A component unmounts when it’s removed from the screen.

This isn't the specific page I was reading months earlier, but this is where it's referenced: https://react.dev/learn/lifecycle-of-reactive-effects#the-lifecycle-of-an-effect There's a lot of content / videos on this so feel free to do your own research on it too You can also build your own custom hooks that leverages React's hooks 🙂

dan0mulls•5mo ago

A hook is basically a re-usable function that you can use in your functional components. It can have it's own state, logic, etc. I typically use hooks for contexts, e.g.:

const someContext = createContext<MyContextType | null>(null);

export function useSomeContext() {
  const value = useContext(someContext);

  if (!value) {
    throw new Error('You cannot use useSomeContext outside of <SomeContext.Provider>');
  }

  return value;
}

const someContext = createContext<MyContextType | null>(null);

export function useSomeContext() {
  const value = useContext(someContext);

  if (!value) {
    throw new Error('You cannot use useSomeContext outside of <SomeContext.Provider>');
  }

  return value;
}

And then inside a component:

function App() {
  return (
    <SomeContext.Provider>
      <MyComponent />
    </SomeContext.Provider>
  );
}

function MyComponent() {
  const ctxValue = useSomeContext();

  return <h1>{ctxValue}</h1>;
}

function App() {
  return (
    <SomeContext.Provider>
      <MyComponent />
    </SomeContext.Provider>
  );
}

function MyComponent() {
  const ctxValue = useSomeContext();

  return <h1>{ctxValue}</h1>;
}

FakerOP•5mo ago

yep sorry, will adjust the title

StefanH•5mo ago

Hooks are pretty much just a way to get a component's state out of the function and into some global state. The function has no way to remember state without them Your question is very broad though, do you have any more specific questions?

FakerOP•5mo ago

not yet, will come back with more questions as I progress in learning React

Gaming

Programming

How do Hooks work in programming and in React?

Did you find this page helpful?