I'm learning React and came across Context API, while looking at sample code I found it has got render () function
Per my understanding Context react class component is there to manage state, so it's not clear why do we need to use render( ) function ?
Class components have render methods. Class components can access the Context API but the render method is completely decoupled from the Context API.
Related
I am using react-use-intercom.
Using following hook from the guide react-use-intercom which suggests to use functional components everywhere.
const { boot, shutdown, hide, show, update } = useIntercom();
However I am using class components everywhere, is there any way that I can do use it in class component itself, because the official documentation has examples in functional component only.
I want to use this methods on click of a button, i.e on some events.
You cannot use hooks in class component, which is a rule from React. There is a way to get pass that. You can create a functional component with useIntercom, pass the state or function as props to your class component. For example:
function Intercom(){
const intercom = useIntercom();
return <YourComponent {...intercom} />
}
For example, you now can use the boot function in your component like
this.props.boot()
So I've got a component that is dependent on the context of BrowserRouter to hook into
<BrowserRouter>
<...>
<.../>
<.../>
<MyRedirectComponent/>
<.../>
</...>
</BrowserRouter>
I would love to simply include BrowserRouter inside my MyRedirectComponent that way I wouldn't need to wrap it all the time.
const MyRedirectComponent = () => {
const browserRouterParentExists = // I dunno
return browserRouterParentExists ? (
<NormalStuff/>
) : (
<BrowserRouter>
<NormalStuff/>
</BrowserRouter>
)
}
Is correctly populating browserRouterParentExists possible?
Writing conditional logic that tries to access parent component is an anti-pattern in React IMO and I don't think there is a public API you can use for that purpose.
I didn't get what you are trying to achieve but BrowserRouter is defined as
A <Router> that uses the HTML5 history API (pushState, replaceState
and the popstate event) to keep your UI in sync with the URL.
and most of the time you only need one BrowserRouter in your app in a top level component like App considering its usage. So wrapping a component with it and using that component throughout your app is not quite reasonable. If you are trying to redirect user to another route based on some condition, you can use any data coming from props, state, Context API or a state management lib. like Redux etc. to implement your logic and render Redirect component together with that conditional logic.
Is there a way to update the Redux store before the ReactDOM.render(...) is runned?
Something like store.dispatch(...).then(() => ReactDOM.render(...))
Or a way to just replace the entire "state" of the store?
I am making an API with React components that is used inside another application with another framework, Dojo. Because of this we are using ReactDOM.render(...) and ReactDOM.unmountCompoentAtNode(...) when the component should appear/disappear.
So in the API, I am reusing the redux store, since it is not deleted from the memory/RAM even though a React component is unmounted via ReactDOM.unmountComponentAtNode(...). If I did not reuse the store, but made a new one every time the React component should render, the actions where "fetched by the Redux store" more and more times. Because of this I would like to ensure that I get to refresh the Redux store before I mount the component again.
Given that the rendered state should depend on the redux store, have you seen redux-thunk ?
One way is to have a show a spinner when the API endpoint is being reached out to.
After setting the state from the API response, go ahead and show the real component.
You are approaching the solution in the wrong way. For this use case, we have life cycle methods in components
ReactDOM.render(<App />, document.getElementById('root'))
In this code I am rendering App component, to solve your problem I'll use componentDidMount life cycle method of App and from there I'll dispatch the API call.
class App {
componentDidMount() {
dispatch(MY_ACTION)
}
render() {
return (<h1>dummy</h1>)
}
}
For hooks based functional component, you need to use useEfect
const App = () => {
useEffect(() => {
dispatch(MY_ACTION)
}, [])
return (<h1>dummy</h1>)
}
const App = () => (
<View>
<Text>Test</Text>
</View>
)
class App extends Component {
render() {
return (
<View>
<Text>Test</Text>
</View>
);
}
}
When I test, two things are the same.
Please tell me the difference between these two.
A Class Component is a stateful component and const App is a stateless (or functional) component.
A stateful component is used to:
initialize the state
modify the state
render something
Additionally it has lifecycle methods.
Whereas a stateless component is often just used to return a piece of UI.
In short: a class component is more powerful than a functional component
EDIT:
Since React Native 0.59 also functional components can have a state. See Hooks-Intro for more information.
Using class you can access life cycle hook and you can store a state in the class. Using class you can build stateful component or smart component. Meaning that you handle logic in your class component like doing http request
Using functional component. In this case is const you can build dump component or stateless component (component only use to display data). This is a great way to keep your react code maintainable and readable. Breaking it up into smaller components and passing props to child components.
You can read it more here because is very long expain so I just give you brief overview
Regards
Class will be for containers components. "smart" functional component that conatins State. and data and previewing "dumb" view components.
The "dumb" functional component is used to preview something or better say. render something that is usualy sent from a container.
Now days using hooks you can get the whole life cycle of the class component in a functional component. The only difference is that the functional is state less!
I am reading this and it says:
When a component is purely a result of props alone, no state, the
component can be written as a pure function avoiding the need to
create a React component instance.
What's the difference between a component and a component instance ?
Are they the same ?
EDIT:
What is the difference between Component and Component Instance ?
How do they relate to each-other ?
Conceptually ?
How are they represented in computer memory? How does the representation differ ?
What is a component and what is an instance of that component ? (In memory.) What kind of JS Object ?
Instance in what sense ? Object oriented sense ?
Is it true that every component can have (one or more) instance(s) ?
How many instances can a component have ?
Does it even make sense to say that an instance can be created for a/every react component ?
How are react component instances created and how are components created ?
Reason for asking:
I am trying to create a concept map of react to clarify the terminology and how they relate to each other.
Here is a draft:
The basic difference is, when it a Component, React will run/add all its Lifecycle methods. This will be useful when you have state in your component. When you use this component, React will create a React Component Instance which will have all the lifecycle methods and other hooks added to it.
class App extends React.Component{
...
}
In some cases, you won't use state. In those cases, adding all those lifecycle methods are unnecessary. So, React gives you an way to create an component which will have render alone. It is called PureComponent. When you use this, there is no need to create a new Component Instance because there is no lifecycle methods here. It'll just be a function which can take props and return React Elements.
class App extends React.PureComponent{
...
}
Hope this helps!
[Update]
What is a Component and a Component Instance?
Technically, a Component in React is a class or a function.
Example:
class App extends React.Component{
...
}
//stateless component
const App = (props) => {
...
}
When you use that component, it'll be instantiated, more like new App(). But, React does it by itself in a different way.
For Example:
render(){
return <App/> //Instance of the component App
}
Instances are required because, each instance can perform individually. Instances are a copy of original class.
Simple answer is, components will be a Class and component Instance will be the copy/instance of the class and will be used in render
Hope this explains!
A "React component instance" is just an instance that was created from a previously defined class component. See the example below (es6/JSX) which contains both props and state:
class MyComponentClass extends React.Component {
constructor(props) {
super(props);
// Set initial state
this.state = {
example: 'example'
};
}
render() {
return <div>
<div>{this.state.example}</div>
<div>{this.props.example}</div>
</div>;
}
}
If you have no need for state in your component you can use a pure, stateless, functional React component like so:
function MyStatelessFunctionalComponent(props) {
return <div>{this.props.example}</div>;
}
Here is some more information about stateless React components when they were introduced in React v0.14. Since then you have the ability to use hooks starting in React v16.8, which allow you to define a functional component that has state or makes use of the component lifecyle.
As mentioned in some other comments, there are many performance benefits when using stateless components. These types of components are perfect for when you want something purely presentational as an example.
Since there’s no state or lifecycle methods to worry about, the React team plans to avoid unnecessary checks and memory allocations in future releases.