Use ref inside React.memo - javascript

React.memo can be used to control whether a React function component should update or not. It compares by props by default. Now I want to compare a prop with one of the ref inside the function component. To be more specific, here is the code(Written in Typescript):
interface RichEditorProps {
value: string;
onChange: (value: string) => void;
}
export const RichEditor = React.memo((props: RichEditorProps) => {
const contentEditableDiv = useRef<HTMLDivElement>(null);
useEffect(() => {
contentEditableDiv.current!.addEventListener("input", () => {
props.onChange(contentEditableDiv.current!.innerHTML);
});
});
return (
<div contentEditable suppressContentEditableWarning ref={contentEditableDiv}>
{props.value}
</div>
)
}, ((prevProps, nextProps) => {
// I want to do this, but it doesn't work because contentEditableDiv is not available here.
return nextProps.value !== contentEditableDiv.current!.innerHTML;
}));
As you can see, I want to update the component when contentEditableDiv.current!.innerHTML doesn't equal to nextProps.value, but I cannot do it because contentEditableDiv is not available there. Is there any other way to achieve this without turning it into a class Component?
P.S. One way to achieve this may be to give the div an id and use document.getElementById to grab the div component inside the compare function. But I want to avoid this approach since in this way, I have to think of a method to assign a unique id to it, I haven't found an easy way to do it. And I'm curious if there's any other way to do it.

Related

Calling function defined within a react function component on a click event form another function component - React.js

I am constructing some node objects in a function(prepareNodes) to pass to React Flow within a functional component A (lets say), and I have defined a custom node component(CardNode) stateless, which has a button. On button click it should trigger the function(prepareNodes) defined within Component A.
function ComponentA = ({ selectedNodes }) => {
const reactFlowWrapper = useRef(null);
const [elements, setElements] = useState([]);
const [edges, setEdges] = useState([]);
const prepareNode = async (nodeid) => {
//some service calls to fetch data and constuct nodes
setElements([ ...nodes]);
setEdges([...edges]);
}
return (
<ReactFlowProvider>
<div className="reactflow-wrapper" ref={reactFlowWrapper}>
<ReactFlow
nodes={elements}
edges={edges}
//some properties
>
</ReactFlow>
</div>
</ReactFlowProvider>
)
};
export default ComponentA;
function CardNode({ data }) {
const renderSubFlowNodes = (id) => {
console.log(id);
//prepareNode(id)
}
return (
<>
<Handle type="target" position={Position.Top} />
<div className="flex node-wrapper">
<button className="btn-transparent btn-toggle-node" href="#" onClick={() => renderSubFlowNodes(data['id']) }>
<div>
<img src={Icon}/>
</div>
</button>
</div>
<Handle type="source" position={Position.Bottom}/>
</>
);
}
export default CardNode;
I looked for some references online, and most of them suggest to move this resuable function out of the component, but since this function carries a state that it directly sets to the ReactFlow using useState hook, I dont think it would be much of a help.
Other references talks about using useCallback or useRefs and forwardRef, useImperativeHandle especially for functional component, Which I did not quite understand well.
Can someone suggest me a solution or a work around for this specific use-case of mine.
You can add an onClick handler to the each node, and within the node view you call this handler on click.
In the parent Component within the onClick handler you can call prepareNode as needed.
useEffect(() => {
setElements(
elements.map(item => {
...item,
onClick: (i) => {
console.log(i);
prepareNode();
},
})
)},
[]);
The classical approach is to have a parent object that defines prepareNode (along with the state items it uses) and pass the required pieces as props into the components that use them.
That "parent object" could be a common-ancestor component, or a Context (if the chain from the parent to the children makes it cumbersome to pass the props all the way down it).

React does not recognize the `xxx` prop on a DOM element

I've got a component that wrap any children that I give him. This component has a useState to give an editMode status and setter. So inside this component, to pass this state, I've done it like this :
import ShowMoreWrapper from 'components/ui/showmore/ShowMoreWrapper'
type PropsTypes = {
children: JSX.Element
}
const TargetCard = ({
children,
}: PropsTypes): JSX.Element => {
const [editMode, setEditMode] = useState(false)
return (
<ShowMoreWrapper initialHeight={initialHeight} maxHeight={maxHeight}>
{cloneElement(children, {
editMode,
setEditMode,
})}
</ShowMoreWrapper>
)
}
Then
<TargetCard>
<ProfileDetails />
</TargetCard>
And inside my children component, I received it like this :
type ProfileDetailsTypes = {
editMode?: boolean
setEditMode?: React.Dispatch<React.SetStateAction<boolean>>
}
const ProfileDetails = ({
editMode,
setEditMode,
}: ProfileDetailsTypes): JSX.Element => {
Inside this component, I use editMode as a boolean to display/hide things and setEditMode as a setter, like this example :
{editMode && <div>Hello world</div>}
<div onClick={() => setEditMode(false)}>Cancel edit mode</div>
But on render I've this double error :
React does not recognize the `editMode` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `editmode` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
React does not recognize the `setEditMode` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `seteditmode` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
In another child component I don't have any problem to deal with them, but on this one, I'm stuck... Can you see something obvious in my code ? Thanks.

How to pass data from vanilla JavaScript to React functional component

I'm trying to update (setState) a React functional component from within "regular" (vanilla) JavaScript.
I searched through StackOverflow but all the answers deal with passing data from React to (vanilla) JavaScript, and not the other way around.
Let's take the example from the docs:
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
To render it in JavaScript, I do:
let example = ReactDOM.render(
<Example />,
document.getElementById('example-wrapper')
);
Now suppose I want to manually update the count from the vanilla JavaScript code, outside of react. Like:
function updateExampleCount(newCount) {
example.setCount(newCount); // ???
}
I can't access the component state, as setCount is a private variable inside the function, and example returned from render is null.
If I use a class component, then render returns a reference to the component and then I can call example.setState. But I prefer not to convert my component into a class if I can avoid it.
The docs for render say:
Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).
But my component does have a state (count), it just doesn't recognize it.
If it's not possible to use the return value from render, is there another way to "get" the component and then use setCount (or some other way to set the state)?
Or do I just have to use a class component for this?
Thanks.
There is no way to access the state from outside the component. It's like trying to access a locally scoped variable from outside a function.
Using a class component wouldn't help either since you wouldn't be able to get hold of the instance of the class created inside the React app.
If you want to trigger a state change from outside the application, then the application needs to provide an event handler.
For (a really quick and dirty) example:
const outside = {
value: 2,
callbacks: [],
addCallback: function (callback) { this.callbacks.push(callback); },
setValue: function (value) {
this.value = value;
this.callbacks.forEach(
callback => callback(this.value)
);
}
};
function Component = () => {
const [val, setVal] = useState(outside.value);
useEffect(() => {
outside.addCallback((value) => setVal(value));
}, []);
return <p>{val}</p>
}
It is possible. You could pass your setCount function as a parameter to use it in your JS outside of React - but I would not really recommend this.
I would recommend that you keep your business logic and React logic separate.
The only things that need to be aware of state and will be using it are React components themselves. I would structure your code in a way that it is not coupled to React, and does not have to use or depend on React state in any way.
This is easier said than done at the beginning. If you need help with it, maybe provide a use case that you are trying to solve in this way, and a better answer might be provided.
It can be done by extending Example so it will pass a reference to the setCount function back to the parent code, see below. (This might be the same as what Oli mentioned, if so then I had the same idea and made a working implementation before answering)
const { useState } = React;
// functionFromComponent will store the function from Example.
let functionFromComponent = undefined;
const setter = (someFn) => functionFromComponent = someFn;
const Example = ({ setFunction }) => { // take `setFunction` from props
const [count, setCount] = useState(0);
setFunction(setCount); // pass setCount to the parent code
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
ReactDOM.render(
<Example setFunction={setter} />,
document.getElementById('example-wrapper')
);
function buttonClicked() {
if (functionFromComponent) {
functionFromComponent(777);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="example-wrapper"></div>
<button id="regularButton" onclick="buttonClicked()">Regular button</button>

Provide alternative render method for React Component

In my app I have several form field components that all behave the same way but look slightly different. I want to be able to use the state and class methods of a single formfield component while providing some sort of alternative render method so that I can customize the appearance of this element on the fly. I know I can wrap children and then use the props.children in the component. But I'm looking to re-use the components methods somehow:
class Parent extends React.Component {
render() {
<div className="parent">
<ChildFormField
renderAlternate={self => {
return (
<div className="child--alternate">
<input onChange={self.doThing} />
</div>
);
}}
/>
</div>
}
}
// And the child component look something like...
class ChildFormField extends React.Component {
state = {
value: null
}
doThing = value => {
return this.setState({ value });
}
render() {
if (this.props.renderAlternate !== undefined) {
return this.props.renderAlternate();
}
// standard return
return <div />;
}
}
I'm relatively new to React outside of its basic usage. Is there a recommended way to achieve this functionality?
Your renderAlternate function expects a parameter self. So you need to pass this when calling it.
return this.props.renderAlternate(this);
See https://codesandbox.io/s/w759j6pl6k as an example of your code.
This recipe is known as render prop. It's widely used where it's suitable, but here it looks like bad design decision, primarily because it exists to access component self instance. This is the case for inheritance:
class AlternateChildFormField extends ChildFormField {
render() {
return (
<div className="child--alternate">
<input onChange={this.doThing} />
</div>
);
}
}
In React, function composition is usually preferred, but inheritance is acceptable solution if it serves a good purpose. ChildFormField requires doThing to be a method and not helper function because it needs to access this.setState.
An alternative is to use React 16.7 hooks and functional components. This way the same component can be expressed with composition:
const useThingState = () => {
const [state, setState] = useState({ value: null });
return value => {
return setState({ value });
};
}
const ChildFormField = props => {
// not used here
// const doThing = useThingState();
return <div />;
}
const AlternateChildFormField = props => {
const doThing = useThingState();
return (
<div className="child--alternate">
<input onChange={doThing} />
</div>
);
}
The common way this is managed in React ecosystem are High Order Components:
ref: https://reactjs.org/docs/higher-order-components.html
ref: https://medium.com/backticks-tildes/reusing-react-component-logic-with-higher-order-component-3fbe284beec9
Further, what you are looking for maybe a reuse of state logic.
As React 16.7-alpha you can use hooks to reuse state logic with functional components but APIs are subject of possible breaking changes.
ref: https://medium.com/#nicolaslopezj/reusing-logic-with-react-hooks-8e691f7352fa

How to update a specific object within storage with React/Redux?

I'm considering using Redux for my app, but there's a common use case that I'm not sure how to handle with it. I have a component that displays some object and allows the user to edit it. Every action will create a shallow copy of the object, but what then? How is the component supposed to know how to update the storage with it? In the samples I see that the component is passed a key instead of the actual object, but doesn't that break the concept of incapsulation, since a component isn't supposed to know where it's state/props come from? I want the component to be fully reusable, so it receives an object and information on how to update it in a more general form, which seems to be awkward to implement with Redux (I'm going to have to pass write callbacks to every component, and then chain them somehow).
Am I using Redux wrong, or is there a more suitable alternative for this use case? I'm thinking of making one myself (where every state object knows it's owner and key via some global WeakMap), but I don't want to be reinventing the wheel.
For instance, if my storage looks like this:
Storage = {
items: {
item1: { ... },
item2: { ... },
...
},
someOtherItems: {
item1: { ... },
...
},
oneMoreItem: { ... },
};
I want to be able to display all item objects with the same component. But the component somehow has to know how to write it's updated item back to the storage, so I can't just pass it item1 as key. I could pass a callback that would replace a specific item in the (cloned) storage, but that doesn't work well if, for instance, I have a component that displays a list of items, since I would have to chain those callbacks somehow.
This is a common use case, and yes - you're missing the point here. react/redux makes this really easy.
I usually structure it as follows: Components receive a modelValue object prop and changeValue function prop. The former is the current value, the latter is the function we call to change the value. These props are going to be supplied by redux.
Now we write a connect hoc (higher order component), a simple example might look like this:
const mapStateToProps = (state, ownProps) => {
return {
modelValue: _.get(state, ownProps.model),
};
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
changeValue: (val) => dispatch({
type: "your/reducer/action",
model: ownProps.model,
value: val,
})
};
};
const mergeProps = (stateProps, dispatchProps, ownProps) => {
return {
...stateProps,
...dispatchProps,
...ownProps,
};
};
const MyConnectedComponent = connect(mapStateToProps, mapDispatchToProps, mergeProps)(MyGenericComponent);
This is an example where we pass in a model string to the hoc, and it wires up modelValue and changeValue for us. So now all we need to do is pass in a model like "some.javascript.path" to our component and that's where it will get stored in the state. MyGenericComponent still doesn't know or care about where it's stored in the state, only MyConnectedComponent does.
Usage would be as follows:
<MyConnectedComponent model="some.path.in.the.state" />
And inside MyGenericComponent just consume modelValue for the current value, and execute changeValue to change the value.
Note that you need to also wire up a redux reducer to handle your/reducer/action and actually do the update to the state, but that's a whole other topic.
Edit
You mentioned that you need sub components to be aware of the parent state, this can be achieved by passing model via context. The following examples are using recompose:
const mapStateToProps = ...
const mapDispatchToProps = ...
const mergeProps = ...
const resolveParentModel = (Component) => {
return (props) => {
// we have access to 'model' and 'parentModel' here.
// parentModel comes from parent context, model comes from props
const { parentModel, model } = props;
let combinedModel = model;
// if our model starts with a '.' then it should be a model relative to parent.
// else, it should be an absolute model.
if (model.startsWith(".")) {
combinedModel = parentModel + model;
}
return <Component {...props} model={combinedModel} />;
}
}
const myCustomHoc = (Component) => (
// retrieve the current parent model as a prop
getContext({ parentModel: React.PropTypes.string })(
// here we map parent model and own model into a single combined model
resolveParentModel(
// here we map that combined model into 'modelValue' and 'changeValue'
connect(mapStateToProps, mapDispatchToProps, mergeProps)(
// we provide this single combined model to any children as parent model so the cycle continues
withContext({ parentModel: React.PropTypes.string }, (props) => props.model)(
Component
)
)
)
)
);
In summary, we pass a context value parentModel to all children. Each object maps parent model into it's own model string conditionally. Usage would then look like this:
const MyConnectedParentComponent = myCustomHoc(MyGenericParentComponent);
const MyConnectedSubComponent = myCustomHoc(MyGenericSubComponent);
<MyConnectedParentComponent model="some.obj">
{/* the following model will be resolved into "some.obj.name" automatically because it starts with a '.' */}
<MyConnectedSubComponent model=".name" />
</MyConnectedParentComponent>
Note that nesting this way could then go to any depth. You can access absolute or relative state values anywhere in the tree. You can also get clever with your model string, maybe starting with ^ instead of . will navigate backwards: so some.obj.path and ^name becomes some.obj.name instead of some.obj.path.name etc.
Regarding your concerns with arrays, when rendering arrays you almost always want to render all items in the array - so it would be easy enough to write an array component that just renders X elements (where X is the length of the array) and pass .0, .1, .2 etc to each item.
const SomeArray = ({ modelValue, changeValue }) => (
<div>
{modelValue.map((v, i) => <SomeChildEl key={i} model={"." + i} />)}
<span onClick={() => changeValue([...modelValue, {}])} >Add New Item</span>
</div>
);

Categories