Will it be considered bad practice, using contexProvider without a consumer - reactjs

Question

Would it be considered bad practice, using contextProvider without a consumer. Like I did below. I found out it worked just fine. Not exactly sure if it's the right way.
// context
import React, { useState } from 'react'
import { storeProducts, detailProduct } from './assets/data'
const ProductContext = React.createContext()
const ProductProvider = (props) => {
const [products, setProducts] = useState(storeProducts);
const [productDetails, setProductDetails] = useState(detailProduct)
console.log(products)
return (
<ProductContext.Provider value={{
products,
productDetails
}}>
{props.children}
</ProductContext.Provider>
)
}
const ProductConsumer = ProductContext.Consumer;
export { ProductProvider, ProductConsumer, ProductContext }
/// Context usage
import { ProductContext } from './context'
export default function ProductList() {
const appContext = useContext(ProductContext)
const { products } = appContext
console.log(appContext)
return (
<div className="py-5">
<div className="container">
<Title name="Product" title="Store"></Title>
<div className="row">
{/* <ProductConsumer>
{(product) => <{product}}
</ProductConsumer> */}
{products.map(p => {
return <h1>{p.title}</h1>
})}
</div>
</div>
</div>
It works just fine, just wanted to know it this could have side effects problems down the line.Or if it is outright discouraged and why.

Answer 1

Unlike class components, in functional components there is a different way to make use of context value with useContext hook and is an alternative to writing a Consumer and then using the render prop pattern.
export default function ProductList() {
const appContext = useContext(ProductContext)
const { products } = appContext
console.log(appContext)
return (
<div className="py-5">
<div className="container">
<Title name="Product" title="Store"></Title>
<div className="row">
{products.map(p => {
return <h1>{p.title}</h1>
})}
</div>
</div>
</div>
)
}
So, not defining a consumer doesn't mean you don't have a consumer of the context value

Answer 2

Doesn't seem like something bad you are doing -
Following is the useContext way of consuming the values -
import React, { useContext } from 'react';
// ...
function Display() {
const value = useContext(NumberContext);
return <div>The answer is {value}.</div>;
}
which seems like the way you are doing it.
"The only thing you want to watch out for is that you have to pass the whole context object to useContext – not just the consumer! React will warn you if you forget, but try to rememeber, eh?" - is the only difference between useContext hook and Comsumer.
For more details you can read about it -
https://daveceddia.com/usecontext-hook/