What is the different between react component and function as component in react

daisyque 注册会员
2023-01-25 01:53

I have seen your codesand box demo, form there I think that the reason for losing focus from input field is the place where you have used useState.

Your can do things here that's:

  1. Pass the state as props from parent to child component.

  1. use useState inside your child component as the I prefer the second way.

You can Read this for more knowledge of where to put the useState and when do you really need to use useState.

cz4141 注册会员
2023-01-25 01:53

When you create a new component you can re-use that in another functional component.Whereas, If you create function then you cannot re-use in another functional component, it will have limited access to that particular functional component only.

hanbengwang 注册会员
2023-01-25 01:53
  1. To be a component, function returning JSX should be used as and not as Component().

  2. When a functional component is used as it will have a lifecycle and can have a state.

  3. When a function is called directly as Component() it will just run and (probably) return something. No lifecycle, no hooks, none of the React magic.


When you call the component as {Child()}, it does not have any lifecycle or hook and when you call as , it has it's own lifecycle and hooks this is why you are facing those problems.

For more read on this topis: Link.

About the Author

Question Info

Publish Time
2023-01-25 01:53
Update Time
2023-01-25 01:53

Related Question

Java ListValueMap ClassNotFound异常

在Django Permission类中返回user而不是True或False

if语句和isset($_GET if语句错误

将JSON LIST字符串转换为JSON对象颤振FormatException:意外字符(在字符2处)

keil4 indentifier “ _IRQn” is undefined



在eslint的react js (next js)中找不到Airbnb typescript的选项