ReactHooks | A guide to understanding the different Hooks in React | Frontend Utils library

i want have only one onChange for several inputs in reacthooks so I did this

So I have multiple components and a list of buttons. When I hit a button, I want to use reacthooks to display the corresponding component in {displayComponent}. I only want one component displaying at a time (so if you hit another button it will replace whatever was there previously).

Can someone tell me where i've gone wrong? This isn't working (it's just displaying all three components and the visibility doesn't change). My idea was to have the component display based on if displayComponent matched it's id.

How can I fix it and is there are more efficient way to accomplish this?

I am using ReactHooks UseState and wanted to set value in useState but its not working.. why?? help me??

JS

I want to clear user's input data in a one component from button click event in another component. Component structure looks like bellow :

Hello I'm trying to pass the following code to reacthooks:

I am using ReactHooks. I am trying to access ref of User component in useEffect function. But i am getting elRef.current value as null, though I passed elRef.current as second argument to useEffect. But i am suppose to get reference to div element. But outside (function body) of useEffect, ref value is available. Why is that ? How can i get elRef.current value inside useEffect ?

code

I noticed that when I was using react hooks, a child component's state change does not rerender a parent component that had no state change. This is seen by this code sandbox: https://codesandbox.io/s/kmx6nqr4o

Due to the lack of passing the component to the hook as an argument, or as a bind context, I had mistakenly thought that react hooks / state changes simply triggered an entire application rerender, like how mithril works, and what React's Design Principles states:

React walks the tree recursively and calls render functions of the whole updated tree during a single tick.

Instead, it seems that react hooks know which component they are associated to, and thus, the rendering engine knows to only update that single component, and never call render on anything else, opposing what React's Design Principles document said above.

1. How is the association between hook and component done?

2. How does this association make it so that react knows to only call render on components whose state changed, and not those without? (in the code sandbox, despite child's state changing, the parent element's render is never called)

3. How does this association still work when you abstract the usage of useState and setState into custom hook functions? (as the code sandbox does with the setInterval hook)

Seems the answers lie somewhere with this trail resolveDispatcher, ReactCurrentOwner, react-reconciler.