score:2
they are exactly the same in terms of output but not in terms of performance and what they are. they are called stateful (class-based component) and stateless components (functional component).
generally, if you only want to render a component, i would suggest a functional component since it has better performance and makes the code clear and more reusable, allowing you to atomize better the functionalities.
on the other hand, if you are using some programming pattern (bloc, mvvm, etc) you may need to create classes to hold the business logic, what allows you to extend from each other.
class-based component (stateful)
class-based components make use of es6 class and extend the component class in react.
sometimes called "smart" or "stateful" components as they tend to implement logic and state.
react lifecycle methods can be used inside class components (
componentdidupdate
,componentdidmount
, etc).you pass props down to class components and access them with
this.props
(this
keyword).you need to bind/unbind events and functions.
functional component (stateless)
functional components are basic javascript functions. these are typically arrow functions but can also be created with the regular
function
keyword.contrary to the class-based component, these ones sometimes referred to as "dumb" or "stateless" components as they simply accept data and display them in some form; that is they are mainly responsible for rendering ui.
react lifecycle methods (for example,
componentdidmount
) cannot be used in functional components. however, they allow you to use react hooks (usestate
,useeffect
, etc) which handles all the typical lifecycle benefits adding a cleaner, and reusable code.there is no render method used in functional components, the return of the function will handle it. therefore, they mainly responsible for ui.
functional components can accept and use props.
they have slightly better performance than class-based ones. but the most important thing in my opinion is that they are cleaner and much more reusable.
references:
- https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react/
- https://dev.to/danielleye/react-class-component-vs-function-component-with-hooks-13dg
- https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/
- https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541
regarding your implementation, since gatsby-plugin-intl
uses internal hooks (useintl
) the following code should work:
import react from "react"
import { useintl, link, formattedmessage } from "gatsby-plugin-intl"
const rootindex = (props) => {
const intl = useintl();
return (
<layout>
<seo
title={intl.formatmessage({ id: "title" })}
/>
...
you are missing the const intl = useintl();
that allows your code to use the gatsby-plugin-intl
internationalization. instead of passing it through props
, once you import it, you need to instance it above the return
statement.
score:0
same problem trying adding location
and crumblabel
variables in layout.js
adding
this.state = {
location: props.location,
crumblabel: props.crumblabel,
};
and
const { location } = this.state;
const { crumblabel } = this.state;
works form me.
example code:
src/pages/index.js
import react from 'react';
import layout from '../components/layout';
const indexpage = ({location}) => (
<layout location={location} crumblabel="home">
...
</layout>
);
export default indexpage;
src/components/layout.js
import react, { component } from 'react';
import { breadcrumb } from 'gatsby-plugin-breadcrumb';
class layout extends component {
constructor(props) {
super(props);
this.state = {
location: props.location,
crumblabel: props.crumblabel,
};
}
render() {
const { location } = this.state;
const { crumblabel } = this.state;
return (
<breadcrumb location={location} crumblabel={crumblabel} />
);
}
}
export default layout;
Source: stackoverflow.com
Related Query
- Difference in use between const Page and class Page extends React.Component with GatsbyJS/ReactJS
- Difference between with and without useEffect in react functional component
- react, differences between component create with extend class and simple const = function
- React Router difference between component with and without function
- How to properly use ref with a React class component and styled-components?
- Difference in accessing props after change in redux store between React class component and React functional component
- Difference between React useCallback with pure function declared inside and outside component
- What is the difference between class componentName extends Component {} and export class componentName extends Component {}
- Difference between component and container in react redux
- Difference between React Component and React Element
- react router difference between component and render
- Difference between import React and import { Component } syntax
- Jest/Enzyme Class Component testing with React Suspense and React.lazy child component
- Typescript with React - use HOC on a generic component class
- React navigation didfocus event listener works differently between class component and functional component
- ReactJS - What is difference between component state and class variable?
- 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 arrow functions and regular functions inside React functional components (no longer using class components)?
- What is the difference between accessible, accessibilityLabel and accessibilityHint properties of Text component in react native?
- React: Difference between a Stateful Class Component and a Function Component using Hooks?
- What's the difference between class and className with respect to css inheritance?
- In a React Component, what's the difference between foo(){} and bar = () => {} and when should I use which?
- React - difference between function and component
- Difference and use cases with useEffect and useMemo hooks on React
- How do I use types defined by @types/redux-form in React component with Field and FieldArray?
- What's the difference between functional component and create component using useMemo() in React
- what is the difference between element attribute and component attribute in React <Route><Route/> tag
- Confused between the difference between JSX.Element vs React.Component and when to use them with React-dom-router
More Query from same tag
- Change Embed Button Color when using Semantic-UI React
- React-Emotion - Animating a div with EmotionJS
- ReactJS - Can't build, minify error when using "Regex: named capturing groups"
- How do I change the style of the header using ReactTable
- Why onClick event doesn't change the props.title in React
- Identify roles with SPA and .NET Core 3
- Set state for incremental numbers input
- Conditional onClick from ternary
- TypeError: Cannot read property 'map' of undefined using redux and Django Rest Framework to Pull Data
- ReactJS: How to trim label when it is a long text in material ui autocomplete
- React-select default behaviour and custom looking
- React-router 2.0: passing username from login to children
- removing child component from parent component within map loop
- Reactjs return App after fetching data with Firestore
- Rendering an error message after form submission in React
- issue with copy to clipboard in react.js
- How to change style of styled-component dynamically?
- Spread operator completely clearing state in my reducer when I switch inputs
- How to disable time display on custom time bar hover in vis timeline?
- How to customise gray colours in material UI
- React conditional rendering - Why doesn't this code render anything?
- React: Keypress listener on div
- Rendering invalid credentials message in React on Rails App
- Suppress updating of a child components that are connected to redux state
- Converting React Higher Order Component (HOC) to TypeScript Causes Error: "Exported variable has or is using private name"
- how can i use useReducer react js with firestore? it always return undifined
- How to filter data in react?
- React JS: Get Context Data After getting success on API Call
- How do I get the name and id of a dropdown list and append to formdata in React?
- React: onClick on button not working