React js lifecycle methods not firing on wrapped component - javascript

Here is a component:
export default class MyComponent extends React.Component {
componentWillReceiveProps(newProps) {
console.log('RECEIVED PROPS');
}
render() {
return <div>{this.props.foo}</div>
}
}
Here is a wrapper/higher-order-component:
const withSomething = (ComponentToWrap) => {
render() {
return <ComponentToWrap {...this.props} />
}
}
Here is a functional component that wraps MyComponent in withSomething:
export default function WrappedComponent(props) {
const Component = withSomething(MyComponent);
return <Component ... some props ... />
}
Result: props-related lifecycle functions (such as componentWillReceiveProps) in MyComponent never fire, even when I update the props.
What is up with this? Do props-based lifecycle methods not work on wrapped components?

The problem is that since the line that creates the wrapped component is contained in the functional component, it basically creates a new component every time the functional component renders.
This line ends up being included in WrappedComponent's render method:
const Component = withSomething(MyComponent);
...which means Component gets overwritten at every render.
Another clue is to put a componentDidMount() into MyComponent -- it'll fire every time the props update.
Solution is to create the wrapped component somewhere OUTSIDE the functional component, or outside the render method if you are using a regular class component.

Related

Memoize callback coming from React class component as closure

During the conversion of class components to functional component with hooks, I came across a scenario which I will try to recreate with a simple example:
I have
Parent component as class component ParentClass
Child component as a functional component with hooks ChildComponent
My parent component ParentClass passes an inline arrow function to ChildComponent as a prop
parent.jsx (which is a class component)
// inside render method
render () {
return (
<div>
{
["component1", "component2"].map((c) => (
<ChildComponent
key={c}
setParentItem={
(item) => {
// ... some more logics involving values available in
// curernt scope only. (for example c)
this.setState({
component: c,
item,
});
}
}
/>
))
}
</div>
)
}
child.jsx (which is a functional component)
const [selectedItem, setSelectedItem] = useState({});
/**
* Here in the dependency array of useEffect
* eslint-plugin-react asks to add setParentItem as dependency
* which should be memoized because from the parent component it is
* passed as an inline arrow function.
* How can I resolve this?
*/
useEffect(() => {
setParentItem(selectedItem); // setParentItem retrieved via props from ParentClass component
}, [selectedItem]); // Here; adding setParentItem in dependency array will cause infinite render
How can I memoize setParentItem so that after adding it to the dependency array of useEffect in the ChildComponent, render will not get stuck in an infinite loop?
Please also have a look at the codesandbox for working example.
Add it as field of the class component:
class MyComponent extends React.Component {
setParentItem = () => {
// ...
}
render() {
// ...
<ChildComponent
setParentItem={this.setParentItem}
/>
// ...
}
}
Now, when your callback use closures you cant do it that simply. In this case you have to change your code so it doesn't create closures. I.e. make ChildComponent to forward value:
function ChildComponent({ setParentItem, component, ...props }) {
// ...
setParentItem(selectedItem, component);
}

React Ref Api's

So I am following video tutorials by Max on Udemy and in one of the lectures he is trying to explain Ref Api's in react 16.3
So here is what he did, Inside on of the container class (not App.js) he created a property known as this.lastref = React.createRef(); and then created a ref tag in return JSX code which looks like this ref={this.lastref} (This is the parent component)
Now in child component he created a method which looks like this
myFocus () {
this.lastref.current.focus()
}
and then in parent component, he again did something like this in componentDidMount lifecycle
componentDidMount() {
this.lastref.current.myFocus()
}
Now here are two questions which I have.
[Question Part]
First: How can he use this.lastref in child component? Is this because of the uni-directional (or one directional) flow from Parent to child (this.lastPersonRef is referred from ref={this.lastPersonRef} ?
Second: myFocus I believe happens to be static method so shouldn't he initiate it before using it?
[Code Example]
Here is what Parent Component should look like -> [person.js]
import React, { Component } from 'react';
import Person from './persons/person-s';
class Cpersons extends Component {
this.lastref = React.createRef()
componentDidMount() {
this.lastref.current.myFocus()
}
render (
return {
<Person
key={el.id}
click={this.props.cpdelete.bind(index)}
ref={this.lastref}
name={el.name}
age={el.age}
changed={(event) => this.props.cpchanged(event, el.id)} />
});
}
}
export default Cpersons
and this should be my child component -> [person-s.js]
import React, { Component } from 'react';
class Cppersons extends Component {
myFocus () {
this.lastref.current.focus()
}
render() {
//something
return (
<div> Something </div>
)
}
}
export default Cppersons;
ref has changed a lot in the React world and documentation regarding it is wildy different. I suggest you use the callback method.
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.otherComponentRef = null; // Will be set after the first render
}
render() {
return [
<OtherComponent ref={el => this.otherComponentRef = el} />,
<ChildComponent reference={this.otherComponentRef} />
];
}
}
First: How can he use this.lastref in child component? Is this because
of the uni-directional (or one directional) flow from Parent to child
(this.lastPersonRef is referred from ref={this.lastPersonRef} ?
when a ref is created inside a class component like this,
this.myRef = React.CreateRef();
this.myRef is assigned a null value. Later when the component is mounted, React assigns this.myRef an object with the current property making this.myRef.current an object containing either:
the dom element that the ref is attached to, or
the component that the ref is attached
In your code, lastref is attached to the Person component like so,
<Person ref={this.lastref} .../>
which at
componentDidMount() {
this.lastref.current.myFocus()
}
React assigns the Person instance (component) to this.lastref.current, like this
// ~ with a bit of React magic under the hood
this.lastref.current = new Person();
Since myFocus is a method on the instance, it can be called by this.lastref.current.myFocus()
I encourage you to read more about React Ref and its expected behavior from React docs. If you find yourself stuck, you can read about how class inheritance work in Javascript which gives more insight to what is going on behind the scenes.
Second: myFocus I believe happens to be static method so shouldn't he
initiate it before using it?
it's really just the syntax being used from a different Javascript specification
class P {
constructor(props) {
super();
this.myRef = props.myRef
}
myFocus() {
console.log(this.myRef)
}
}
is equivalent to
class P {
myFocus() {
console.log(this.props.myRef)
}
}
in the eyes of the babel-loader from Babel which transpiles the Javascript in a typical React application created with create-react-app. myFocus will be a method of the Instance when it is instantiated in both cases.

How to rerender a React component once mounted without calling setState in componentDidMount

I have a react component wrapped in a HOC that passes props to the wrapped child. When the child's constructor is called it does some work and then it executes a callback passed down in props from the HOC. This callback updates properties in the HOC constructor (definitions)(I think this is the correct language). The HOC then uses the updated definitions to setup subscriptions for both the HOC and its wrapped child.
The reason I am doing this is the child receives props from its parent that contains a dynamic array of objects that requires subscriptions while the component is mounted and there is no way to know what these subscriptions are when the HOC is instantiated.
The HOC is calling setState, which rerenders the child, however, I understand this is an anti-pattern. How could I solve this?
HOC
const HOCComponent= function HOCComponent(config) {
return function returnWrapped(Wrapped) {
return class Wrapper extends Component {
constructor(props) {
this.handleData = this.handleData.bind(this)
this.data = {}
}
comonentDidMount() {
setSubscription(this.data, () => {
this.setState({
key: getData(),
})
})
}
handleData(data) {
this.data = data
}
render () {
<Wrapped handleData={this.handleData} />
}
}
}
}
CHILD
const Component class Wrapper extends Component {
constructor(props) {
// Stuff with props received from it's parent (not HOC)
props.handleData(props.data)
}
render() {
<div>Hello!</div>
}
}
You can use the forceUpdate method.
Within the component if you call this.forceUpdate() the component will be re-rendered.

Is ReactJS "clever" when it comes to invoking the render method?

The render method of this component does use any of the props supplied to the component.
Will the component re-render when the props change regardless?
class MyComponent extends React.Component {
constructor(props) {
super(props);
const { propValue } = props;
// do something with propValue...
}
render () {
return (
<div>foo</div>
);
}
}
Will render be called - yes. Unless you implement shouldComponentUpdate to return false.
Will the DOM be rerendered - no.
Also you might want to take a look at https://babeljs.io/docs/plugins/transform-react-constant-elements/ that hoists static elements up.
In
const Hr = () => {
return <hr className="hr" />;
};
Out
const _ref = <hr className="hr" />;
const Hr = () => {
return _ref;
};
Yes, the component will re-render unless you implement shouldComponentUpdate. You can inherit from PureComponent which uses shallow comparison of prop and state with previous values to determine if component should update or not.
As far as i know react will call the render method in the following scenarios
when your component get mounted initially
when state got changed using this.setState()
when your component receives new props
when this.forceUpdate() get called.
since you didn't implement shouldcomponentUpdate() the render method is going to get called

Instance of reactJs component to render a component

Can I use an instance of a reactJS component to render a component.
Eg, Let's say my reactJS component is
class myComponent extends Component{
constructor(props){
super(props)
this.state = {
next:false
}
this.alertSomething = this.alertSomething.bind(this);
this.showNext = this.showNext.bind(this);
}
showNext(){
console.log('wow');
console.log(this.state, this, this.state.next);
this.setState({next:true});
}
alertSomething(){
alert('Alert Something')
console.log(this.state, this, this.state.next);
this.setState({next:true});
}
render(){
return(
<div className='column'>
</div>
)
}
}
export default myComponent
Now, inside my another component can I do;
let x = new displayContent.renderComponent();
render(
<x />
//or
<x.render />
)
// I tried both it didn't work, I thought there mush be some other way to achieve this, after all every component is just a javascript object.
Also at the same time, can I call function to make change in its state. Like.
x.someFunction();
where someFunctino is inside that react component, doing setState.
Is it possible? OR am I missing something?
Edit: I clearly understand that when you want to render a react component, you can always do, <component />.
This question is just out of curiosity, can this be done? if not, then why?, I mean how is that different from other javascript objects.
Well, you can use the React.createElement method to render a component:
React.createElement(Component, params)
but with JSX, this is the same:
<Component />
Refer to Multiple components in the React documentation.
This is not how you're supposed to use React. You don't have to handle object instantiations ; React do this for you. Use composition instead.
render() {
return (
<myComponent />
)
}
Also, if you want to set the state of a child component from a parent component, you should probably move the logic in the parent.
Probably you are looking for something like this.
import React, { Component } from "react";
import CamCapture from './CamCapture.js';
export default class ProctorVideoFeed extends Component{
constructor(props) {
super(props);
this.Camera = React.createElement(CamCapture);
}
//this.handleVideoClick = this.handleVideoClick.bind(this);
render(){
return(
<div>
<span>{this.Camera}</span>
<button onClick = {this.Camera.StopRecording}>Stop</button>
</div>
)
}
}
Here StopRecording is a function defined inside CamCapture class.

Categories