Develop Reference

React Hook weird behavior - Need to create a child component to get the expected result

Why do I need to create a child component to get the results from the hook
const SearchFormWrapper = () => {
const inputs = useQueryInputs();
return <SearchForm inputs={inputs} onSubmit={onSubmit} />
}
The above one doesn't work, but if I replace it with
const SearchFormWrapper = () => {
return <SearchFormWrapping />
}
const SearchFormWrapping = () => {
const inputs = useQueryInputs();
return <SearchForm inputs={inputs} onSubmit={onSubmit} />
}
EUREKA!, everything works as expected.
Any idea why does this thing happen?

How to pass props to children with functional components?

I'm having a trouble with passing props to children in functional react. My {children} is a Details component like below:
<SidebarPage>
{children}
</SidebarPage>
const Details = () => {}
how can I pass props in way that, I put props to {children} and I receive this props in Details component? Is this even workable?
Thanks for any help!

You can pass component as prop, something like -
const SidebarPage = ({ChildComponent}) => {
const props = { name: "X" };
return <ChildComponent {...props} />
}
const Details = (props) => {}
<SidebarPage ChildComponent={Details} />

You could use cloneElement to add new props to a component children
const newProps = {aProp: "aProp"} ;
return (
<SidebarPage>
{React.Children.map(props.children, child => {
return React.cloneElement(child, {
newProps,
}, null)
}
</SidebarPage>
)

retrieve parent component ref for a hook

I've found myself needing to retrieve the element ref for every parent component that my hook, useExample, is used in. However, I'm stumped as to how I might be able to retrieve something like this or how to even check if there is an element to target?
Usually I would just do something a little "hacky" in a functional component like so:
const Example = WrappedComponent => {
const ref = createRef();
return <WrappedComponent ref={ref} />;
};
However, due to it being a hook and returning information and not a component, I can't target any component, and thus I'm very stumped.
My current code:
const useExample = () => {
const [stateValue, setStateValue] = useState("example");
useEffect(() => {
// Run some code...
}, []);
return stateValue;
};
const Component = () => {
const data = useExample();
return (
<div> /* <--- How do I gain access to this element */
<span>{ data }</span>
</div>
);
};
I could probably pass a created ref which has been attached to the parent div as a parameter to useExample, however this feels cheap and hacky, and I feel there should be a much easier solution.
In the ideal world something like this would be amazing:
const ref = React.getParentRef();
Apologies if there is an obvious answer in the documentation, I'm very new to React and am unsure of the correct question to be asking or what to be looking for in order to find it in the docs.

You can return the ref from the hook
const useExample = () => {
const myRef = React.useRef(null)
const [stateValue, setStateValue] = useState("example");
useEffect(() => {
// Run some code...
}, []);
return [myRef , stateValue];
};
const Component = () => {
const [myRef , data] = useExample();
return (
<div ref={myRef}> /* <--- How do I gain access to this element */
<span>{ data }</span>
</div>
);
};
If data can be a component:
const useExample = () => {
const myRef = React.useRef(null);
const [stateValue, setStateValue] = React.useState("example");
React.useEffect(() => {
const parent = myRef?.current?.parentNode;
console.log(parent);
}, []);
return <div ref={myRef}>{stateValue}</div>;
};
const Component = () => {
const data = useExample();
return (
<div>
<span>{data}</span>
</div>
);
};
export default function App() {
return <Component />;
}
But then you have to access the parent node from the ref, I believe this may cause problems as a component is being returned, and its anti pattern

Dynamic import of react hooks

Can we dynamically import hooks based on the value passed to the component?
For eg.
App.js
<BaseComponent isActive />
BaseComponent.js
if(props.isActive) {
// import useActive (custom Hook)
}
I donot want these(custom hook) files to be imported and increase the size of BaseComponent even when the props contain falsey values.

You can dynamically import hooks as it is just a function (using require), but you shouldn't because you can't use hooks inside conditions.
See Rules of Hooks
Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
If you want conditionally use a hook, use the condition in its implementation (look for example at skip option of useQuery hook from Apollo GraphQL Client).
const useActive = (isUsed) => {
if (isUsed) {
// logic
}
}

You should extract the logic inside the useActive hook and dynamically import it instead of dynamically importing the hook since you should not call Hooks inside loops, conditions, or nested functions., checkout Rules of Hooks:
Let's say your useActive hook was trying to update the document title (in real world, it has to be a big chunk of code that you would consider using dynamic import)
It might be implemented as below:
// useActive.js
import { useEffect } from "react";
export function useActive() {
useEffect(() => {
document.title = "(Active) Hello World!";
}, []);
}
And you tried to use it in the BaseComponent:
// BaseComponent.js
function BaseComponent({ isActive }) {
if (isActive) { // <-- call Hooks inside conditions ❌
import("./useActive").then(({ useActive }) => {
useActive();
});
}
return <p>Base</p>;
}
Here you violated the rule "don't call Hooks inside conditions" and will get an Invalid hook call. error.
So instead of dynamically import the hook, you can extract the logic inside the hook and dynamically import it:
// updateTitle.js
export function updateTitle() {
document.title = "(Active) Hello World!"
}
And you do the isActive check inside the hook:
// BaseComponent.js
function BaseComponent({ isActive }) {
useEffect(() => {
if (!isActive) return;
import("./updateTitle").then(({ updateTitle }) => {
updateTitle();
});
}, [isActive]);
return <p>Base</p>;
}
It works fine without violating any rules of hooks.
I have attached a CodeSandbox for you to play around:

You could create a Higher Order Component that fetches the hook and then passes it down as a prop to a wrapped component. By doing so the wrapped component can use the hook without breaking the rules of hooks, eg from the wrapped component's point of view, the reference to the hook never changes and the hook gets called everytime the wrapped component renders. Here is what the code would look like:
export function withDynamicHook(hookName, importFunc, Component) {
return (props) => {
const [hook, setHook] = useState();
useEffect(() => {
importFunc().then((mod) => setHook(() => mod[hookName]));
}, []);
if (!hook) {
return null;
}
const newProps = { ...props, [hookName]: hook };
return <Component {...newProps} />;
};
}
// example of a Component using it:
const MyComponent = ({useMyHook}) => {
let something = useMyHook();
console.log(something)
return <div>myHook returned something, see the console to inspect it </div>
}
const MyComponentWithHook = withDynamicHook('useMyHook', () => import('module-containing-usemyhook'), MyComponent)

To whoever encountered it as well: You can't use Hooks inside dynamically imported components(however, apparently if you does not use hooks even the first example works):
instead of:
const useDynamicDemoImport = (name) => {
const [comp, setComp] = useState(null);
useEffect(() => {
let resolvedComp = false;
import(`#site/src/demos/${name}`)
.then((m) => {
if (!resolvedComp) {
resolvedComp = true;
setComp(m.default);
}
})
.catch(console.error);
return () => {
resolvedComp = true;
};
}, []);
return comp;
};
const DemoPreviewer: FC<DemoPreviewerProps> = (props) => {
comp = useDynamicDemoImport(props.name);
return (
<Paper sx={{ position: "relative" }}>
{comp}
</Paper>
);
};
export default DemoPreviewer
use React Lazy instead and render the component later
const useDynamicDemoImport = (name) => {
const Comp = React.lazy(() => import(`#site/src/demos/${name}`));
return comp;
};
const RootDemoPreviewer: FC<DemoPreviewerProps> = (props) => {
console.log("RootDemoPreviewer");
return (
<React.Suspense fallback={<div>Loading...</div>}>
<DemoPreviewer {...props} />
</React.Suspense>
);
};
const DemoPreviewer: FC<DemoPreviewerProps> = (props) => {
const Comp = useDynamicDemoImport(props.name);
return (
<Paper sx={{ position: "relative" }}>
<Comp />
</Paper>
);
};
export default RootDemoPreviewer

React event listeners on array of elements

My React render function eventually renders a set of elements:
data.map((element) => {
return <Object onChange={this.onObjectChange} />;
});
My question is what is the appropriate way to figure out which object had its onChange method called when I receive the callback?

The first parameter to the onSubjectChange function will have your event which contains the event information.
Hope that helps!

If you can, pass the ID or element to the component you're creating, then pass that reference back to your event handler.
handleObjectChange = id => {
const object = data.find(id)
}
render() {
return data.map((element, index) => (
<Object onChange={this.handleObjectChange} key={element.id} id={element.id} />
))
// or just pass element={element} to track the object itself, why not?
// after all, every array item's key must be unique
}
In Object...
function change() {
const { onChange, id } = this.props
onChange(id)
}
Is your Object closed, or prefer not to add an extra property? You could try wrapping it.
class IdentifiedButton extends Component {
handleClick = (event, ...args) => {
const { id, onClick } = this.props
onClick(event, id, ...args)
}
render() {
const { id, onClick, ...props } = this.props
return <Button onClick={this.handleClick} {...props} />
}
}

Wrap the callback in a function and pass an identifier:
data.map(element => <Object onChange={event => this.onObjectChange(element.id, event)} />);

If rerendering your Object component won't cost you that much I would go with something like this
data.map(element => <Object onChange={() => this.onObjectChange(element)} />);
If Object component is quite heavyweight you better pass element to Object component and then pass it to onChange callback
data.map(element => (
<Object
key={element.id}
onChange={this.onObjectChange}
element={element}
/>
);
class Object extends React.Component {
handleChange = () => this.props.onChange(this.props.element)
render(){
return (
<input type='text' onChange={this.handleChange} />
)
}
}

To avoid creating an anonymous function in every render, you could have a function that creates the handlers like this (I am using Todo App as an example):
createOnChangeEventHandler(todo) {
const { onToggleClick } = this.props;
this.handlers = this.handlers || {};
if (!this.handlers[todo.id]) {
this.handlers[todo.id] = () => onToggleClick(todo.id);
}
return this.handlers[todo.id];
}
...
Then in render()
{todos.map(todo => (<Todo key={todo.id} onClick={this.createOnChangeEventHandler(todo)} />))}