score:2
in essence a function component already is just a function which returns a reactnode
.
note that the return type reactnode
actually does already allow for arrays as well as string
, etc.
type reacttext = string | number;
type reactchild = reactelement | reacttext;
interface reactnodearray extends array<reactnode> {}
type reactfragment = {} | reactnodearray;
type reactnode = reactchild | reactfragment | reactportal | boolean | null | undefined;
the primary advantage of writing it as a function component is the ability to call the function using jsx syntax. you can also make use of nested jsx to automatically set the children
prop on your function.
you don't need to use jsx. in your example it would be fine to call functioncomponent({animalname: 'dog'})
(note: you cannot do this with class components). in that case the primary difference between it and renderfunction('dog')
is that one puts all of its arguments into a single props object and the other doesn't.
Source: stackoverflow.com
Related Query
- In React, what is the difference between using functional component and just a function, which returns React node?
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- What's the difference between functional component and create component using useMemo() in React
- What is the difference between React functional component <Message id> and js function formatMessage() and which one is better to use?
- What is the difference between React component instance property and state property?
- What is the difference between React component and React component instance?
- ReactJS: what is the difference between functional component and class component
- What is the difference between accessible, accessibilityLabel and accessibilityHint properties of Text component in react native?
- what is the difference between element attribute and component attribute in React <Route><Route/> tag
- What is the difference between function and functional React component?
- What is the difference between domElement and pageContext when using them within an spfx react project?
- What is the difference between component prop and using children in Route?
- What is the difference between React Native and React?
- What is the difference between using constructor vs getInitialState in React / React Native?
- What's the difference between "super()" and "super(props)" in React when using es6 classes?
- What is the difference between NextJs and Create React App
- What is the difference between hashHistory and browserHistory in react router?
- What is the difference between using constructor vs state = {} to declare state in react component?
- React Native - What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()?
- What is the main difference between using React-Redux Hooks and React-Redux Connect()?
- What is the main difference between React Query and Redux?
- React - What is the difference between renderToString and renderToStaticMarkup
- Difference between with and without useEffect in react functional component
- React Hooks: What is the difference between 'useMutationEffect' and 'useLayoutEffect'?
- How does React router works and what is the difference between <link> and<Route>
- ES6 React - What are the difference between reference, shallow copy and deep copy and how to compare them?
- What is the difference between useHistory() and props.history in React Route
- what is the difference between getDefaultProps and getInitialState react js
- React Transition Group: What is the difference between the appear, enter, exit events and the enter, active done className suffixes?
- Redux saga: What is the difference between using yield call() and async/await?
More Query from same tag
- nodejs and reactjs - can not redirect
- react redux pass this.props to actions from component
- Axios Delete doest not work in react-redux app
- Download Response Data as Stream w/ Axios in React App
- Stateless component with nested component property
- Ionic React Swiper not showing number of slides in slidesPerView property
- React Link component lose css or magin align when used
- How do you test for the non-existence of anchor element using jest and react-testing-library?
- React Native - how to use local SVG file (and color it)
- Hooks: How to get global state (this.state)?
- How to import a css file in a react component as raw text?
- Getting error while opening Google Drive Picker - The feature you requested is currently unavailable. Please try again later
- Get user.id as a string from clerk
- how to change jest mock function return value in each test?
- How to created Public Navbar and Protected Navbar with React and Redux?
- Using `react-bootstrap` with `npm`
- Can't add 'cursor: pointer' hover with JSS in React Typescript project
- Admin-on-rest - Place pagination at top
- Why is change function not firing on radio input in react
- React: Retrieve dynamic child key upon event
- React component rendering even when there is no change in the state value
- mapping nested object as props to custom component
- React Hooks and Axios Image Upload with Multer
- D3 how to curve segments when using `line.defined()`
- How to get timezone offset to correctly display on 24h format
- How to make this JSX code more generic to avoid code reuse in React?
- ReactJS: Props not available immediately?
- Call the component on button click event
- Searchbox dosen't work when the input is erased react redux
- Using Ref in functional component results in NaN when accessing element height