Develop Reference

Can I use React Hooks outside a React Component

I am working on a React App with latest React version. What I want to do is to call React useContext Hook in a function which is not a React Component. Can anybody please help me?

No, you cannot. From the docs
Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions. Instead, you can:
✅ Call Hooks from React function components.
✅ Call Hooks from custom
Hooks (we’ll learn about them on the next page).
By following this rule, you ensure that all stateful logic in a component is clearly
visible from its source code.

You might want to consider passing the context data into the function as a parameter, as you are not able to use the useContext hook outside a React Component.

Like mentioned before you cannot use React Hooks outside of React, there's also not a ton of background information. What I could suggest is that you create a separate Context file importing createContext and useState from React. Then create a wrapper for further React Components
type ContextType = {
someState: stateDetails | null,
setSomeState: React.Dispatch<React.SetStateAction<stateDetails | null>>
}
type ContextProps = {
children: React.ReactNode
}
export const Context = createContext<ContextType>({} as ContextType)
export const ContextWrapper = ({ children }: ContextProps) => {
const [ someState, setSomeState ] = useState<stateDetails | null>(null)
return (
<>
<Context.Provider value={{ someState, setSomeState }}>
{children}
</Context.Provider>
</>
)
}
Then you can wrap parts of your app with the wrapper but encasing the jsx in the new wrapper component so it gets transferred around the app.
<ContextWrapper>
<OtherComponent />
</ContextWrapper>
This should be sufficient enough to create some simple context, for more advanced state handling look into Zustand or Redux. Regardless, this context can only passed into React elements.

Usage of React HOC for Functional Components

I was referring to the below link (section : HOCs for Functional Components)
https://rossbulat.medium.com/how-to-use-react-higher-order-components-c0be6821eb6c
In the example, below is the code for the HOC;
//functional HOC with useState hook
import React, { useState } from 'react';
function withCountState(Wrapped) {
return function (props) {
const [count, setCount] = useState(0);
props['count'] = count;
props['setCount'] = setCount;
return <Wrapped {...props} />;
}
}
Also, the Wrapped component code is as below;
const Wrapped = (props) => {
const {count, setCount} = props;
return(
<div>
<h1>Counter Functional Component</h1>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Increment count
</button>
</div>);
};
For applying HOC to , we use
const EnhancedWrapped = withCountState(Wrapped);
Now I have 2 questions;
For consuming this component, do we just say <EnhancedWrapped> may be in our App.js or do we need anything else?
What benefit do we really get out of creating this HOC?

Viet has answered your questions. HOC is a way to make your components re-usable through composition. You can have other components which get wrapped by the HOC and now they would have access to the count and setCount functionality.
Depending upon what you are trying to accomplish, it's also a good idea to consider the pitfalls of HOC and consider alternate patterns such as :
Render Props: React Docs on Render Props
Using Custom Hooks over HOC Article on custom hooks
When using React Hooks, I'd personally prefer making custom hooks over using HOCs. And depending upon the use case, you may want to check out if React Context would make sense if multiple components are going to need a shared state.

For consuming this component, do we just say may be in our App.js or do we need anything else? Yes, just use HOC like any other JSX component.
What benefit do we really get out of creating this HOC? You can make it reusable. Let's say you want another component with different content inside, like , you could just create a new component by const AnotherEnhancedWrapped = withCountState(AnotherWrapped);

Render Props vs HOC?

I'm trying to learn React from scratch and having a deep knowledge of concepts !
Today I was searching about HOC, Render Props and the differences between the two. I've checked render times for both. I wrote a console.log('rendered') into render to check render times in browser console.
HOC: When I used HOC to write an usable component, I saw after each changes on props I've render for HOC and component that used HOC.
Render Prop: In this case I've changed the props, but only wrapper component has rendered. because with render props we load only one component and inject codes to use that component feature !
So, Is it a benefit to use Render Props instead HOC components? Or HOC components are usable and powerful yet?
Thanks

HOC, Render Props and now hooks all serve to the same purpose: Share stateful logic between components. There is actually no way to tell which one is better or worst. All depends on your use case.
High Order Components are composable. It's easy to nest them
const withProps = (Component) => connect(mapState, mapDispatch)(<Component foo='bar' />)
Children as a function is a bad pattern for composability, nesting looks a lot like a callback hell cause they need to be executed inside an jsx block
const Component = () =>{
return(
<Consumer>
{
props =>(
<ThemeConsumer>
{
theme => <Child {...props} {...theme} />
}
</ThemeConsumer>
)
}
</Consumer>
)
}
On the other hand, render props it's easy to set up, have less boilerplate and in most cases are easier to reason about.
Hooks bring the best of both worlds
hooks are composable, can be easily nested, and are simple to reason about cause after all they're just plain old functions
const useConfig = () =>{
const customProps = useCustomProps()
const theme = useContext(ThemeContext)
return [customProps, theme]
}
const Component = () =>{
const [props, theme] = useConfig()
}
But again: There is no such thing as the best pattern. It's just a matter of where are you going to use it.

Direct call of a functional component

Stateless functional component is just a function that receives props and returns React element:
const Foo = props => <Bar />;
This way <Foo {...props} /> (i.e. React.createElement(Foo, props)) in parent component could be omitted in favour of calling Foo directly, Foo(props), so React.createElement tiny overhead could be eliminated, yet this isn't necessary.
Is it considered a bad practice to call functional components directly with props argument, and why? What are possible implications of doing this? Can this affect the performance in negative way?
My specific case is that there's some component that is shallow wrapper over DOM element because this was considered a good idea by a third party:
function ThirdPartyThemedInput({style, ...props}) {
return <input style={{color: 'red', ...style}} {...props} />;
}
Here's a demo that shows this case.
This is widely accepted practice but the problem with it is that it's impossible to get ref of wrapped DOM element from stateless function, so the component uses React.forwardRef:
function withRef(SFC) {
return React.forwardRef((props, ref) => SFC({ref, ...props}));
// this won't work
// React.forwardRef((props, ref) => <SFC ref={ref} {...props } />);
}
const ThemedInput = withRef(ThirdPartyThemedInput);
This way it can be used as:
<ThemedInput ref={inputRef} />
...
inputRef.current.focus();
The obvious downside I'm aware of is that withRef requires a developer to be aware of wrapped component implementation, which isn't a usual requirement for HOCs.
Is it considered a proper approach in a situation like described above?

I don't think there's anything wrong with calling Stateless Functional Component directly. As you said it's even one tiny overhead eliminated. As to the possible implications, it would be bold to say that there are none implications and there will be none implications in the future because this is a really rare way of using SFC's. But everything points to conclusion that there shouldn't be any implications (it's just one function call less).
Anyway, below I'd like to present another way of doing this using findDOMNode instead of refs:
I've created Focus component that is really convenient to use but needs to be initialized first (since we need a way to trigger focus outside props since a component may be rerendered with the same props):
// focus.js
import React from "react";
import { findDOMNode } from "react-dom";
export default function createFocus() {
class Focus extends React.Component {
componentDidMount() {
Focus.now = () => {
findDOMNode(this).focus();
}
}
render() {
return this.props.children;
}
}
return Focus;
}
// index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import createFocus from './focus';
const Focus = createFocus();
import { ThirdPartyThemedInput } from './third-party-lib';
function App() {
return (
<div>
<button onClick={() => Focus.now()}>Proceed with form</button>
<Focus>
<ThirdPartyThemedInput placeholder="Fill me" />
</Focus>
</div>
);
}
render(<App />, document.getElementById('root'));
live at: https://stackblitz.com/edit/react-bpqicw

Functional components are very useful when you don't need to use any of the lifecycle method or don't need to update the component state. As far as you don't need to them, you're good and yet best to go with stateless component.
This will not hit the performance issue but gain the profit regarding its performance because we're just simply using function to render the component and not caring for its update, mounts, receive props, etc. But still there's no 100% gain using stateless component because react internally use class to render them.
It's about 45% improvement.
This post will also guide which one to choose between statefull component and stateless component.
Further, you can not only receive the props but can also receive the ref:
const stateless = (props, ref) => <ReturnComponent {...props} ref={ref} />
Okay, let me refine my statement. Most of the blogs and even the docs states that stateless component don't have ref. Here are a few Q/A prepared regarding this issue:
Do I need to use statefull component just to use ref?
No. I already mentioned that we must require the class based component if we have to work with component state or hook some lifecycle method.
How can I create ref in stateless component?
const stateless = () => {
// we can't do this.myRef = React.createRef()
// so, let's create an object
const RefObj = {}
// now, create ref in {RefObj}
RefObj.myRef = React.createRef()
return <input type="text" ref={myRef} />
}

When to use stateless component in react

I know the difference between stateless and statefull components in react application. I want to know what is the efficient way to use stateless and statefull components together. Is there any performance benefit of using the one over the other in any particular situation

You should default to using stateless components. Since they use no state, it's very easy to tell when a component should be re-rendered, since they will display the same thing if their props do not change.
You should use stateful components when you need to use setState or when you need to use lifecycle hooks.
In theory there could be performance benefits for using stateless components due to the fact they are pure functions (or should be pure functions), but I don't have any hard numbers for that.

Class Components
Class components (that have state) can be used when you want to store some local data inside a component. For eg -
import React from 'react'
function handleInc (state, props) {
return {
count: state.count + 1
}
}
class App extends React.Component {
state = {
count: 0
}
handleClick = () => {
this.setState(handleInc);
}
render() {
return (
<div>
<button onClick={this.handleClick}>Increase</button>
<p>{this.state.count}</p>
</div>
);
}
}
These components are also called smart containers or components because they hold all the logic for modifying the UI based on the state (Redux pattern).
Functional Components or Stateless Components
Functional components have no state or any local data. These components can be used to update some UI by passing down the props from the parent component.
<Child data={this.state.count} />
Functional components have their own advantages like :
They are easy to test.
They are easy to understand.
Performance
No worries about the this keyword.
If anything more, refer to this article.